AngularJS是Google开发的一个MVC框架,这是1.0的版本。目前有1.0,2.0,4.0三个版本。2.0之后就是Angular。今年三月份Angular 4.0刚刚推出,所以关于Angular最新版的资料是寥寥无几。初学的话还是从1.0开始学起。
推荐两个关于AngularJS的网站:
angularjs 1官网 或 angular2.0/4.0官网
AngularJS 通过新的属性和表达式扩展了 HTML。可以构建一个单一页面应用程序(SPAs:Single Page Applications)。AngularJS 是一个 JavaScript 框架。它可通过 script标签添加到 HTML 页面。在github上提供各个 angular.js 版本下载githubAnglar的学习曲线比较陡,不是一般的技术人员可以掌握,所以学习起来会变得非常有趣。
AngularJS的四大核心特性:
1.MVC
Model:数据模型层
View:视图层,负责展示
Controller:业务逻辑和控制逻辑
2.模块化 Model
3.指令系统(特有)
4.双向数据绑定(特有)
在任何页面中必须包含的关键属性是ng-app,它定义了一个Angular应用。一个页面上有且仅有一个ng-app指令,声明引用,类似于C语言中的main函数。
AngularJS的MVC是借助于$scopr
实现的
rootScop
e处于最顶层的作用域对象
作用域有层次结构,和JS中原型查找的机制是一样的
$scope
是一个POJO(Plain Old JavaScript Object),提供了工具
Angular 2 是Google推出的一个跨平台全终端的框架,和目前比较火的React和Vue.js相比,Angular2更适合从原生App开发或后端Java/.Net等转型过来开发前端的程序员,因为其开发模型更接近于传统强类型语言的模式
Angular 2第一个小应用 Hello Angular
1.打开terminal(命令行窗口),输入 ng new hello-angular --skip-install
, 然后进入 hello-angular 目录执行 cnpm install
。
2.推荐在新建 project 时忽略安装 ( 加 –skip-install 参数),然后用 cnpm 执行依赖安装
3.新建了一个名为“hello-angular”的工程,进入该工程目录,输入 code
|-- .editorconfig //通用的编辑器配置文件,以后换IDE时可以保持一些设置的平滑迁移
|-- .gitignore //需要Git忽略的文件列表
|-- angular-cli.json //Angular-CLI配置文件
|-- karma.conf.js //Karma单元测试配置文件
|-- package.json //node打包文件
|-- protractor.conf.js //端到端测试配置文件(集成测试)
|-- README.md
|-- tslint.json //代码Lint静态检查的配置
|-- e2e //端到端测试代码目录
| |-- app.e2e-spec.ts
| |-- app.po.ts
| |-- tsconfig.json
|-- src //源码
|-- favicon.ico //站点收藏图标
|-- index.html //入口页面
|-- main.ts //入口ts文件
|-- polyfills.ts //针对浏览器能力增强的polyfills引用文件
|-- styles.css //全局样式文件
|-- test.ts //测试入口文件
|-- tsconfig.json //TypeScript配置文件
|-- typings.d.ts //项目中使用的TypeScript类型定义引用文件
|-- app //应用目录
| |-- app.component.css //引导性组件的样式文件
| |-- app.component.html //引导性组件的HTML模板
| |-- app.component.spec.ts //引导性组件测试文件
| |-- app.component.ts //系统引导性组件
| |-- app.module.ts //应用根模块
| |-- index.ts //应用入口
|-- assets //站点资源文件夹
| |-- .gitkeep
|-- environments
|-- environment.prod.ts //生产环境配置文件
|-- environment.ts //环境配置
4.打开浏览器输入 http://localhost:4200
即可看到程序运行成功
5.所有都是angular自动替我们生成的,所以打开 src/app/app.component.ts
修改title: title = 'Hello Angular'
;,保存后查看浏览器,结果已经更新了,热装载的特性使得开发变得很方便。
创建第一个组件
1.为app增加一个组件(Component),在命令行窗口输入
ng generate component login --inline-template --inline-style
2.参数generate是用来生成文件的,参数component是说明我们要生成一个组件,login是组件名称可以自定义。最后两个参数是告诉angular-cli:生成组件时,请把组件的HTML模板和CSS样式和组件放在同一个文件中
3.可以简化命令改写成
ng g c login -it -is
4.angular-cli为我们在\src\app目录下生成了一个新文件夹login,在login目录下生成了2个文件,其中 login.component.spec.ts 是测试文件
5.另一个是 login.component.ts 是新建的Component
6.Angular提倡的文件命名方式是这样的:组件名称.component.ts
7.组件的HTML模板命名为: 组件名称.component.html
8.组件的样式文件命名为: 组件名称.component.css
9.新生成的Login组件源码如下:
import { Component, OnInit } from '@angular/core'; //@Component是Angular提供的装饰器函数,用来描述Compoent的元数据 //其中selector是指这个组件的在HTML模板中的标签是什么 //template是嵌入(inline)的HTML模板,如果使用单独文件可用templateUrl //styles是嵌入(inline)的CSS样式,如果使用单独文件可用styleUrls @Component({ selector: 'app-login', template: ` <p> login Works! </p> `, styles: [] }) export class LoginComponent implements OnInit { constructor() { } ngOnInit() { } }
10.组件建成后,进行使用。注意上面的代码中@Component修饰配置中的 selector: ‘app-login’,这意味着可以在其他组件的template中使用 <app-login></app-login>
来引用的这个组件。
11.打开 hello-angular\src\app\app.component.html 加入我们的组件引用
<h1>
{{title}}
</h1>
<app-login></app-login>
12.保存后返回浏览器,第一个组件显示
模块的概念
1.模块就是提供相对独立功能的功能块,每块完成特定的工作领域。
2.Angular内建的很多库是以模块形式提供的,比如FormsModule封装了表单处理,HttpModule封装了Http的处理等等。
3.每个Angular应用至少有一个模块类 —— 根模块。如同Java的主方法一样,通过引导根模块来启动应用。
4.根模块的类名叫做AppModule,放在 hello-angular\src\app\app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { LoginComponent } from './login/login.component'; @NgModule({ declarations: [ AppComponent, LoginComponent ], imports: [ BrowserModule, FormsModule, HttpModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
5.@NgModule装饰器用来为模块定义元数据。
6.declarations列出了应用中的顶层组件,包括引导性组件AppComponent和创建的LoginComponent。
7.在module里面声明的组件在module范围内都可以直接使用,也就是说在同一module里面的任何Component都可以在其模板文件中直接使用声明的组件,就像在AppComponent的模板末尾加上 一样。
8.imports引入了个辅助模块:
- BrowserModule提供了运行在浏览器中的应用所需要的关键服务(Service)和指令(Directive),所有需要在浏览器中跑的应用都必须引用
- FormsModule提供了表单处理和双向绑定等服务和指令
- HttpModule提供Http请求和响应的服务
9.providers列出会在此模块中“注入”的服务(Service)
10.bootstrap指明哪个组件为引导性组件。当Angular引导应用时,它会在DOM中渲染这个引导性组件,并把结果放进index.html的该组件的元素标签中
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HelloAngular</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root>Loading...</app-root> </body> </html>
引导过程
1.Angular2通过在main.ts中引导AppModule来启动应用。
2.不同的平台,Angular提供了不同的引导选项。
3.下面是通过即时(JiT)编译器动态引导,一般在进行开发调试时,默认采用这种方式。
//main.ts import './polyfills.ts'; // 连同Angular编译器一起发布到浏览器 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { enableProdMode } from '@angular/core'; import { environment } from './environments/environment'; import { AppModule } from './app/'; if (environment.production) { enableProdMode(); } //Angular编译器在浏览器中编译并引导该应用 platformBrowserDynamic().bootstrapModule(AppModule);
4.还有一种是通过使用预编译器(AoT - Ahead-Of-Time)进行静态引导,静态方案可以生成更小、启动更快的应用,建议优先使用它,特别是在移动设备或高延迟网络下。
5.使用static选项,Angular编译器作为构建流程的一部分提前运行,生成一组类工厂。它们的核心就是AppModuleNgFactory。引导预编译的
6.AppModuleNgFactory的语法和动态引导AppModule类的方式很相似。
// 不把编译器发布到浏览器 import { platformBrowser } from '@angular/platform-browser'; // 静态编译器会生成一个AppModule的工厂AppModuleNgFactory import { AppModuleNgFactory } from './app.module.ngfactory'; // 引导AppModuleNgFactory platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
主要参考资料:
[1]. 王芃著,《Angular》,机械工业出版社,2017-02-11
[2]. [美]Phil Ballard著,《JavaScript入门经典 第6版》,人民邮电出版社,2016-06-01