本文结合 https://segmentfault.com/a/1190000009733649 和http://itindex.net/detail/47465-angularjs-%E6%9C%AC%E7%89%B9
插值表达式
//类中定义的变量，通过{{}}在html中直接使用
在 Angular 中，我们可以使用 {{}} 插值语法实现数据绑定。
值得一提的是，我们可以使用 Angular 内置的 json 管道，来显示对象信息：
-
@Component({//it is Component -
selector: 'my-app', //selector is template container -
template: ` -
... -
<p>{{address | json}}</p> -
`, -
}) -
export class AppComponent { -
name = 'Semlinker'; -
address = { -
province: '福建', -
city: '厦门' -
} -
}
Component({//it is Component selector: 'my-app', //selector is template container template: ` ... <p>{{address | json}}</p> `, }) export class AppComponent { name = 'Semlinker'; address = { province: '福建', city: '厦门' } }
MVC
上面的例子中，使用了一个studentController， AngularJS中在module上使用controller操作可以为module定义一个Controller，Controller定义了一个操作的具体行为。Controller通过依赖注入的服务完成各种操作，然后通过$scope服把view需要的数据传递过去。为保证隔离性，在Controller中一定不要有任何与DOM相关的代码。 定义一个controller如下：
AngularJSSample.controller(['studentController', function ($scope) {
}]);
Directives（指令）
这个特性非常有用，这个特性扩展HTML的表现能力，通过为DOM对象增加新的属性指令为DOM对象定制行为。使用这个特性可以以更少的代码构建更加优雅的页面结构。AngularJS本身内置了一些指令，下面来看一个例子，使用了内置的ng-repeat
<div ng-init="students = [
{name:'John', age:25, gender:'boy'},
{name:'Joy', age:15, gender:'girl'},
{name:'Mary', age:28, gender:'girl'},
{name:'Sebastian', age:10, gender:'boy'},
{name:'Samantha', age:16, gender:'girl'}
]">
<div data-ng-repeat="student in students">
<h3>{{student.name}}:{{student.age}}</h3>
</div>
</div>
上例中，首先通过ng-init指令创建了一个students的对象数组， 然后使用ng-repeat指令打印出所有学生的名字和年龄。还可以使用ng-show过滤重复值，只显示boy：
<div data-ng-repeat="student in students" data-ng-show="student.gender=='boy'">
<h3>{{student.name}}:{{student.age}}</h3>
</div>
或者使用ng-switch做一些更复杂的控制,年满18岁打印ADULT。
<div data-ng-repeat="student in students" data-ng-show="student.gender=='boy'"
data-ng-switch="student.age >18">
<h3>{{student.name}}:{{student.age}}</h3>
<p data-ng-switch-when="true">ADULT</p>
</div>
这个特性比较杀手级，它为开发人员省了很多代码，对定义Web Page Structure非常有帮助。而且除了本身自带的Directives满足大部分群众的需要， 还支持定制Directive满足你的奇葩需求。
数据绑定（Data Binding） （双向绑定）
在 Angular 中，我们可以通过 (eventName) 的语法，实现事件绑定。
<date-picker (dateChanged)="statement()"></date-picker>
等价于<date-picker on-dateChanged="statement()"></date-picker>
4.1 单向绑定：.ng-bind="name"和{{name}}：单向显示$scope绑定的数据，ng-bind为angularjs自带显示数据指令
<h2 ng-bind="name"></h2>
<h1>{{name}}</h1>
单向绑定的缺点？
4.2 双向绑定: ng-model="name"：双向数据绑定，文本框值改变，name值就改变。
例如 <mat-radio-group class="plcm-whitelist-radio" [(ngModel)]="ipType">
<mat-radio-button value="isIPv4">{{IPV4 | translation}}</mat-radio-button>
<mat-radio-button value="isIPv6">{{IPV6 | translation}}</mat-radio-button>
</mat-radio-group>
ipType是双向绑定，ipV4是单向绑定 (ipV4 is final string “IPV4”)
，，，，，，，，，，，，，
在AngularJS中，只需要简单的使用ng-model就可以实现model和view的双向绑定，任何在view上的修改马上反应到Model，任何在Model数据上的修改马上反应到View的展示上。如下：
<div data-ng-repeat="student in students">
<h3>{{student.name}}:{{student.age}}</h3>
Edit Name: <input type="text" data-ng-model="student.name">
</div>
过滤器（Filters）
AngularJS通过Filters提供了改变数据展现形式的方法或者过滤部分数据，实现形式就是以‘|’字符分割expression： {{expression|filter1|filter2}}.例如：把student的名字全部展示为大写：
<div data-ng-repeat="student in students">
<h3>{{student.name|uppercase}}:{{student.age}}</h3>
</div>
和Directive一样，Filter同样支持定制：http://docs.angularjs.org/guide/filter。
模块化（Modules）
在AngularJs中，应用可以拆分为一个个的小模块，模块之间可以相互依赖，这样各个功能可以非常方便重用和测试。在HTML中使用ng-app指令即可定义一个Module:
<html ng-app=“AngularJSSample”>
然后在javascript中，可以非常简单的获取到这个Module，
var AngularJSSample = angular.module('AngularJSSample', []);
之后，你可以为这个Module了添加你想要得东西了，比方说我们前面提到的定制filter和Directive等。例如为定义一个Greet Filter:
var AngularJSSample = angular.module('AngularJSSample', []);
AngularJSSample.filter('greet', function() {
return function(name) {
return 'Hello, ' + name + '!';
};
});
另外angular.module方法的第二个参数是用来指定该模块依赖哪个模块的。
零件视图（Partial Views）
AngularJS除了通过ng-app可以把一个应用拆成小模块，在模块中，还可以通过ngView定义的页面模板，然后和Route配合显示对应的View，这个特性对想写Single Page Application的同学非常有用。
依赖注入（Dependency Injection）
一个类使用另一个类. 网页通常一个类对应一个网页.
-
创建 MemberService 服务 -
@Injectable()//it is Injectable -
export class MemberService { -
constructor(private http: Http) { } -
getMembers() { -
return this.http -
.get(`https://api.github.com/orgs/angular/members?page=1&per_page=5`) -
.map(res => res.json()) //将结果转成任何类型，本例转成json类型 -
} -
} -
配置 MemberService 服务 -
@NgModule({ -
providers:[MemberService] //同比自定义Component。Component is declarations: [ AppComponent, UserComponent] -
}) -
使用 MemberService 服务 -
this.memberService.getMembers()//调用http.get -
.subscribe(data => {//订阅http.get -
if (data) this.members = data; -
});
providers:[MemberService] //同比自定义Component。Component is declarations: [ AppComponent, UserComponent] }) 使用 MemberService 服务 this.memberService.getMembers()//调用http.get .subscribe(data => {//订阅http.get if (data) this.members = data; });供了config操作为一个Module注入依赖的Service，例如我想注入一个“$routeProvider"这个路由服务：
AngularJSSample.config(['$routeProvider', function($routeProvider){
}]) ;
路由（Routes）
配置路由信息
-
export const ROUTES: Routes = [ -
{ path: 'user', component: UserComponent } -
]; -
@NgModule({ -
imports: [BrowserModule, FormsModule, HttpModule, -
RouterModule.forRoot(ROUTES)], -
// ... -
})
配置路由导航
-
@Component({ -
selector: 'my-app', -
template: ` -
<div class="app"> -
<nav> -
<a routerLink="/user">我的</a> -
<a routerLink="/members">Angular成员</a> -
</nav> -
</div> -
`, -
})
实战项目
dashboard.html: //导航页
<div <a class="hyperlink" routerLink="/security/global-security">{{ "GLOBAL_SECURITY_NAV" | translation }}</a></div>
app-routing.modules.ts //内部路由
-
export const appRoutes: Routes = [ -
{ -
path: 'security', -
children: [ -
{path: 'global-security', component: GlobalSecurityPage, canActivate: [ConferencingGuard]}, -
] -
} -
]
global-security.ts //ts实现网页
@Component({
template: `
...
`
})
export class GlobalSecurityPage implements OnInit, OnDestroy {
...
}
，，，，，，，，，，，，，，，，，，，，，，，，，，，
AngularJS中，可以直接用javascript定义可用的路由，页面的跳转再也不用到服务器去走一圈了（前端自己解决router）
AngularJSSample.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/students', {
templateUrl: 'views/students.html',
controller: 'studentsController'
}).otherwise(
{
templateUrl: 'views/greeting.html'
})
}]);
控制器（Controllers）
上面的例子中，使用了一个studentController， AngularJS中在module上使用controller操作可以为module定义一个Controller，Controller定义了一个操作的具体行为。Controller通过依赖注入的服务完成各种操作，然后通过$scope服把view需要的数据传递过去。为保证隔离性，在Controller中一定不要有任何与DOM相关的代码。 定义一个controller如下：
AngularJSSample.controller(['studentController', function ($scope) {
}]);
Scope
Scope就是用来给Controller和View之间做数据传递的,Controller往scope中添加的任何数据，View都可以访问到。
AngularJSSample.controller(['studentController', function ($scope) {
$scope.students = [
{name: 'John', age: 25, gender: 'boy'},
{name: 'Joy', age: 15, gender: 'girl'},
{name: 'Mary', age: 28, gender: 'girl'},
{name: 'Sebastian', age: 10, gender: 'boy'},
{name: 'Samantha', age: 16, gender: 'girl'}
];
}]);
自定义组件
-
自定义组件示例 -
创建 UserComponent 组件 -
export class UserComponent { -
name = 'Semlinker'; -
address = { -
province: '福建', -
city: '厦门' -
}; -
} -
声明 UserComponent 组件 -
declarations: [ AppComponent, UserComponent]@NgModule({ -
declarations: [ AppComponent, UserComponent] -
})使用 UserComponent 组件 //<sl-user> 是自定义控件UserComponent的selector. -
等于在另一个文件使用UserComponent -
template: ` -
<sl-user></sl-user> -
` -
使用构造函数初始化数据 //组件当成类，对类进行操作 -
constructor() { -
this.name = 'Semlinker'; -
this.address = { -
province: '福建', -
city: '厦门' -
} -
}
小结
AngularJS自己定义一整套完整的逻辑，其对前端代码的规范性很有帮助，另外，内置的各种Directive会极大的减少开发人员的代码量；未来AngularJS + Restful Service可能会大行其道。
对AngualarJS的槽点有2个，第一，所有逻辑知识都暴露在JavaScript中，是否会导致一些安全问题，第二，官方的文档可用性极差啊。1
other : angularjs 安装和基本语法 https://zhuanlan.zhihu.com/p/25430902