Updated AngularJS application.

Included node.js libraries.
2025-12-08 14:58:54 +00:00 · 2016-10-29 10:43:07 -07:00
parent 08cce021ee
commit dfc40b3a1e
7 changed files with 118 additions and 59 deletions
@@ -31,6 +31,8 @@ To run this sample, you need the following prerequisites.

 1. SQL Server 2016 (or higher) or an Azure SQL Database
 2. Visual Studio 2015 Update 3 (or higher) or Visual Studio Code Editor with the ASP.NET Core 1.0 (or higher)
+3. .NET Core SDK for [Windows](https://go.microsoft.com/fwlink/?LinkID=827524) or other [operating systems](https://www.microsoft.com/net/core)
+4. Node.js installation [Node.js](https://nodejs.org/en/download/)

 **Azure prerequisites:**

@@ -44,9 +46,7 @@ To run this sample, you need the following prerequisites.

 2. From SQL Server Management Studio or Sql Server Data Tools connect to your SQL Server 2016 or Azure SQL database and execute [sql-scripts/setup.sql](sql-scripts/setup.sql) script that will create and populate **Hero** table.

-3. From Visual Studio 2015, open the **HeroesApp.xproj** file from the root directory. Restore packages using right-click menu on the project in Visual Studio and by choosing Restore Packages item. As an alternative, you may run **dotnet restore** from the command line (from the root folder of application).
-
-4. Add a connection string in appsettings.json or appsettings.development.json file. An example of the content of appsettings.development.json is shown in the following configuration:
+3. Add a connection string in appsettings.json or appsettings.development.json file. An example of the content of appsettings.development.json is shown in the following configuration:

 ```
 {
@@ -60,16 +60,28 @@ If your database is hosted on Azure you can add something like:
 ```
 {
  "ConnectionStrings": {
-    "HeroDb": "Server=<<SERVER>>.database.windows.net;Database=CommentsDb;User Id=<<USER>>;Password=<<PASSWORD>>"
+    "HeroDb": "Server=<<SERVER>>.database.windows.net;Database=HeroDb;User Id=<<USER>>;Password=<<PASSWORD>>"
  }
 }
 ```

 ### Build and run sample

-1. Build project using **dotnet build** command executed from command line (from project root folder) or using Visual Studion 2015. 
-2. Run the sample app using F5 or Ctrl+F5 in Visual Studio 2015, or using **dotnet run** executed in the command prompt of the project root folder.  
-3. Open /index.html Url to see heroes from database. See more details about functionalities in [AngularJS Heroes sample app](https://angular.io/docs/ts/latest/tutorial/) 
+1. Restore NugetPackages using **dotnet restore** command. This command will create **project.lock.json** file.
+2. Restore npm packages using **npm install** command lines. This command will download packages in **node_modules** folder.
+3. Build project using **dotnet build** command executed from command line (from project root folder) or using Visual Studion 2015. 
+4. Run the sample app using **dotnet run** executed in the command prompt of the project root folder.  
+
+Sequence of commands is:
+```
+npm install
+dotnet restore
+dotnet build
+dotnet run
+```
+
+### Run the app
+. Open /index.html Url to see heroes from database. See more details about functionalities in [AngularJS Heroes sample app](https://angular.io/docs/ts/latest/tutorial/) 

 <a name=sample-details></a>

@@ -2,10 +2,13 @@
 using Belgrade.SqlClient.SqlDb;
 using Microsoft.AspNetCore.Builder;
 using Microsoft.AspNetCore.Hosting;
+using Microsoft.AspNetCore.Http;
 using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.FileProviders;
 using Microsoft.Extensions.Logging;
 using System.Data.SqlClient;
+using System.IO;

 namespace AngularHeroApp
 {
@@ -46,6 +49,16 @@ namespace AngularHeroApp

            app.UseMvc();
            app.UseStaticFiles();
+
+            // Expose node_modules as virtual folder
+            // becasue AngularJS uses some libraries from node_modules folder.
+            app.UseStaticFiles(new StaticFileOptions()
+            {
+                FileProvider =
+                    new PhysicalFileProvider(
+                        Path.Combine(Directory.GetCurrentDirectory(), @"node_modules")),
+                        RequestPath = new PathString("/node_modules")
+            });
        }
    }
 }
@@ -7,15 +7,16 @@

  <link rel="stylesheet" href="styles.css">

-    <!-- Polyfill(s) for older browsers -->
-    <script src="libs/core-js/shim.min.js"></script>
-    <script src="libs/zone.js/zone.js"></script>
-    <script src="libs/reflect-metadata/reflect.js"></script>
-    <script src="libs/systemjs/system.src.js"></script>
-    <!-- 2. Configure SystemJS -->
-    <script src="systemjs.config.js"></script>
-    <script>
-      System.import('app').catch(function(err){ console.error(err); });
+  <!-- IE required polyfills, in this exact order -->
+  <script src="node_modules/core-js/client/shim.min.js"></script>
+  <script src="node_modules/zone.js/dist/zone.js"></script>
+  <script src="node_modules/reflect-metadata/Reflect.js"></script>
+  <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+  <script>
+    System.import('system-config.js').then(function () {
+        System.import('main');
+      }).catch(console.error.bind(console));
  </script>
 </head>

@@ -0,0 +1,32 @@
+System.config({
+    paths: {
+        // paths serve as alias
+        'npm:': 'node_modules/'
+    },
+    // map tells the System loader where to look for things
+    map: {
+        // our app is within the app folder
+        'app': 'app',
+        'main': 'app/main.js',
+        // angular bundles
+        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
+        '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
+        '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
+        '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
+        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+        '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
+        '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
+        '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+        '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
+        // other libraries
+        'rxjs': 'npm:rxjs',
+        'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
+    },
+    // packages tells the System loader how to load when no filename and/or no extension
+    packages: {
+        'app': { main: './main.js', defaultExtension: 'js' },
+        'api': { defaultExtension: 'js' },
+        'rxjs': { defaultExtension: 'js' },
+    }
+});
+//# sourceMappingURL=system-config.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"system-config.js","sourceRoot":"","sources":["system-config.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,CAAC;IACZ,KAAK,EAAE;QACL,uBAAuB;QACvB,MAAM,EAAE,eAAe;KACxB;IACD,uDAAuD;IACvD,GAAG,EAAE;QACH,mCAAmC;QACnC,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,aAAa;QAErB,kBAAkB;QAClB,eAAe,EAAE,uCAAuC;QACxD,iBAAiB,EAAE,2CAA2C;QAC9D,mBAAmB,EAAE,+CAA+C;QACpE,2BAA2B,EAAE,+DAA+D;QAC5F,mCAAmC,EAAE,+EAA+E;QACpH,eAAe,EAAE,uCAAuC;QACxD,iBAAiB,EAAE,2CAA2C;QAC9D,gBAAgB,EAAE,yCAAyC;QAC3D,kBAAkB,EAAE,6CAA6C;QAEjE,kBAAkB;QAClB,MAAM,EAAuB,UAAU;QACvC,2BAA2B,EAAE,gEAAgE;KAC9F;IACD,oFAAoF;IACpF,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,gBAAgB,EAAE,IAAI,EAAE;QACpD,KAAK,EAAG,EAAE,gBAAgB,EAAG,IAAI,EAAE;QACnC,MAAM,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE;KAKnC;CACF,CAAC,CAAC"}
@@ -0,0 +1,43 @@
+/**
+ * System configuration for Angular samples
+ * Adjust as necessary for your application needs.
+ */
+declare var System: any;
+
+System.config({
+  paths: {
+    // paths serve as alias
+    'npm:': 'node_modules/'
+  },
+  // map tells the System loader where to look for things
+  map: {
+    // our app is within the app folder
+    'app': 'app',
+    'main': 'app/main.js',
+
+    // angular bundles
+    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
+    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
+    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
+    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
+    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
+    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
+    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+    '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
+
+    // other libraries
+    'rxjs':                      'npm:rxjs',
+    'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
+  },
+  // packages tells the System loader how to load when no filename and/or no extension
+  packages: {
+    'app': { main: './main.js', defaultExtension: 'js' },
+    'api' : { defaultExtension : 'js' },
+    'rxjs': { defaultExtension: 'js' },
+
+    // barrels
+    // 'app/core':   { main: 'index'},
+    // 'app/models': { main: 'index'},
+  }
+});
@@ -1,43 +0,0 @@
-/**
- * System configuration for Angular samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
-    System.config({
-        paths: {
-            // paths serve as alias
-            'npm:': 'libs/'
-        },
-        // map tells the System loader where to look for things
-        map: {
-            // our app is within the app folder
-            app: 'app',
-            // angular bundles
-            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-            // other libraries
-            'rxjs': 'npm:rxjs',
-            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
-        },
-        // packages tells the System loader how to load when no filename and/or no extension
-        packages: {
-            app: {
-                main: './main.js',
-                defaultExtension: 'js'
-            },
-            rxjs: {
-                defaultExtension: 'js'
-            },
-            'angular-in-memory-web-api': {
-                main: './index.js',
-                defaultExtension: 'js'
-            }
-        }
-    });
-})(this);
				`@@ -0,0 +1 @@`
				{"version":3,"file":"system-config.js","sourceRoot":"","sources":["system-config.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,CAAC;IACZ,KAAK,EAAE;QACL,uBAAuB;QACvB,MAAM,EAAE,eAAe;KACxB;IACD,uDAAuD;IACvD,GAAG,EAAE;QACH,mCAAmC;QACnC,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,aAAa;QAErB,kBAAkB;QAClB,eAAe,EAAE,uCAAuC;QACxD,iBAAiB,EAAE,2CAA2C;QAC9D,mBAAmB,EAAE,+CAA+C;QACpE,2BAA2B,EAAE,+DAA+D;QAC5F,mCAAmC,EAAE,+EAA+E;QACpH,eAAe,EAAE,uCAAuC;QACxD,iBAAiB,EAAE,2CAA2C;QAC9D,gBAAgB,EAAE,yCAAyC;QAC3D,kBAAkB,EAAE,6CAA6C;QAEjE,kBAAkB;QAClB,MAAM,EAAuB,UAAU;QACvC,2BAA2B,EAAE,gEAAgE;KAC9F;IACD,oFAAoF;IACpF,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,gBAAgB,EAAE,IAAI,EAAE;QACpD,KAAK,EAAG,EAAE,gBAAgB,EAAG,IAAI,EAAE;QACnC,MAAM,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE;KAKnC;CACF,CAAC,CAAC"}