这里有新鲜出炉的 AngularJS 教程,程序狗速度看过来!
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
这篇文章主要为大家详细介绍了. Net Core+Angular Cli/Angular4 开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
一、基础环境配置
1. 安装 VS 2017 v15.3 或以上版本
2. 安装 VS Code 最新版本
3. 安装 Node.js v6.9 以上版本
4. 重置全局 npm 源,修正为 淘宝的 NPM 镜像:
- npm install -g cnpm --registry=https://registry.npm.taobao.org
5. 安装 TypeScript
- cnpm install - g typescript typings
6. 安装 AngularJS CLI
- cnpm install - g@angular / cli
7. 安装 Yarn
- cnpm i - g yarn yarn config set registry http: //registry.npm.taobao.org
- yarn config set sass - binary - site http: //npm.taobao.org/mirrors/node-sass
8. 启用 Yarn for Angular CLI
- ng set--global packageManager = yarn
至此,开发环境的基础配置工作基本完成。
二、 配置. Net Core 项目
搭建. Net Core 项目时,采用 Api 模板构建一个空的解决方案,并在此基础上启用静态文件支持,详细配置如下:
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Threading.Tasks;
- using Microsoft.AspNetCore.Builder;
- using Microsoft.AspNetCore.Hosting;
- using Microsoft.Extensions.Configuration;
- using Microsoft.Extensions.DependencyInjection;
- using Microsoft.Extensions.Logging;
- namespace App.Integration
- {
- public class Startup
- {
- public Startup(IHostingEnvironment env)
- {
- var builder = new ConfigurationBuilder()
- .SetBasePath(env.ContentRootPath)
- .AddJsonFile("appsettings.json", optional: false, reloadOnChange: true)
- .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true)
- .AddEnvironmentVariables();
- Configuration = builder.Build();
- }
- public IConfigurationRoot Configuration { get; }
- // This method gets called by the runtime. Use this method to add services to the container.
- public void ConfigureServices(IServiceCollection services)
- {
- // Add framework services.
- //services.AddMvc();
- }
- // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
- public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
- {
- loggerFactory.AddConsole(Configuration.GetSection("Logging"));
- loggerFactory.AddDebug();
- //app.UseMvc();
- app.UseDefaultFiles();
- app.UseStaticFiles();
- }
- }
- }
静态文件需要安装名为 Microsoft.AspNetCore.StaticFiles 的 nuget 包,请自行从包管理中安装。
三、配置 Angular Cli 调试环境
在开始项目调试之前,我们需将 angular 资源中的 index.html 移入 wwwroot 中,需注意,此 index.html 文件需是由 ng build 命令生成的版本,一般存储在 / dist 目录中
在编译 angular 资源前,我们需要在 angular cli 设置中,将 DeployUrl 选项设置为 ng server 的默认调试地址:
"deployUrl": "//127.0.0.1:4200", // 指定站点的部署地址,该值最终会赋给 webpack 的 output.publicPath,注意,ng serve 启动调试时并不会调研此参数
以下为 Angular Cli 的各个配置项说明。
- {
- "project": {
- "name": "angular-questionare",
- "ejected": false // 标记该应用是否已经执行过eject命令把webpack配置释放出来
- },
- "apps": [
- {
- "root": "src", // 源码根目录
- "outDir": "dist", // 编译后的输出目录,默认是dist/
- "assets": [ // 记录资源文件夹,构建时复制到`outDir`指定的目录
- "assets",
- "favicon.ico"
- ],
- "index": "index.html", // 指定首页文件,默认值是"index.html"
- "main": "main.ts", // 指定应用的入门文件
- "polyfills": "polyfills.ts", // 指定polyfill文件
- "test": "test.ts", // 指定测试入门文件
- "tsconfig": "tsconfig.app.json", // 指定tsconfig文件
- "testTsconfig": "tsconfig.spec.json", // 指定TypeScript单测脚本的tsconfig文件
- "prefix": "app", // 使用`ng generate`命令时,自动为selector元数据的值添加的前缀名
- "deployUrl": "//cdn.com.cn", // 指定站点的部署地址,该值最终会赋给webpack的output.publicPath,常用于CDN部署
- "styles": [ // 引入全局样式,构建时会打包进来,常用语第三方库引入的样式
- "styles.CSS"
- ],
- "scripts": [ // 引入全局脚本,构建时会打包进来,常用语第三方库引入的脚本
- ],
- "environmentSource": "environments/environment.ts", // 基础环境配置
- "environments": { // 子环境配置文件
- "dev": "environments/environment.ts",
- "prod": "environments/environment.prod.ts"
- }
- }
- ],
- "e2e": {
- "protractor": {
- "config": "./protractor.conf.js"
- }
- },
- "lint": [
- {
- "project": "src/tsconfig.app.json"
- },
- {
- "project": "src/tsconfig.spec.json"
- },
- {
- "project": "e2e/tsconfig.e2e.json"
- }
- ],
- "test": {
- "karma": {
- "config": "./karma.conf.js"
- }
- },
- "defaults": { // 执行`ng generate`命令时的一些默认值
- "styleExt": "css", // 默认生成的样式文件后缀名
- "component": {
- "flat": false, // 生成组件时是否新建文件夹包装组件文件,默认为false(即新建文件夹)
- "spec": true, // 是否生成spec文件,默认为true
- "inlineStyle": false, // 新建时是否使用内联样式,默认为false
- "inlineTemplate": false, // 新建时是否使用内联模板,默认为false
- "viewEncapsulation": "Emulated", // 指定生成的组件的元数据viewEncapsulation的默认值
- "changeDetection": "OnPush", // 指定生成的组件的元数据changeDetection的默认值
- }
- }
- }
为实现以. Net Core Api 项目为主体的站点结构,我们需在使用 ng server 时启用 Deploy 选项,打开对静态资源 "部署地址" 的支持。注意:双站部署可能会产生 JS 跨域,请自行解决
在命令行启动 Angular Cli 调试服务器时加上 deploy 参数 ng serve --deploy-url '//localhost:4200/'
最后,通过 VS 的 F5 命令,打开 Api 项目的运行时,我们可以看到网站的运行效果。Enjoy Coding~
来源: http://www.phperz.com/article/17/0825/337809.html