AngularJS入门
AngularJS入门
什么是AngularJS
AngularJS is a modern JavaScript framework from Google commonly used to work with Single Page Applications (SPAs). AngularJS is open sourced under MIT license and the development progress of AngularJS can be followed on its GitHub repository. The library is called Angular because HTML uses angular brackets.
AngularJS is not a DOM manipulation library like jQuery but it uses a subset of jQuery called jQLite. AngularJS is primarily based on declarative HTML attributes that you can add to your HTML tags. You can try AngularJS in your browser using the Code School website.
Version 1.3.x is the current stable version and the Angular team is working towards a big rewrite of AngularJS for V2.0 which is currently still in development. This article focuses on Angular 1.X with some notes on where Angular is heading with 2.0.
如何使用
新建项目
项目结构
安装
打开bower.js，添加 dependencies
"angular":"1.3.15",
利用gulp，生成wwwroot/lib目录下的文件：
在gulpfile.js中添加以下内容：
任务运行管理器中，运行：
添加引用到_layout.cshtml中：
组件
Directives
添加Directives.cshtml：
HomeControl.cs中添加方法：
访问：
/home/directives
https://docs.angularjs.org/api/ng/directive
DataBinding
HomeController.cs
运行：
Templates
HomeController.cs
运行结果：
实时更新您的修改。
Expressions
运行结果
Repeaters
运行结果
$scope
Learn more about Scopes in AngularJS
Models
定义：
var personApp = angular.module('personApp', []);
使用：
<body
ng-app="personApp">
Controllers
定义：
使用：
Services
使用Services
运行结果
Using services to talk to a REST endpoint
在wwwroot/app目录下新建文件：
personApp.js
personFactory.js
personController.js
新建Model
新建PersonController
新建View
运行结果
John Papa's Angular Style Guide
Routing and Multiple Views
Angular-route的安装：
1，在gulpfile.js中添加对angular-route的支持。
2，运行任务管理器。
3，查看wwwroot/lib中是否生成。
使用
-
新建personModule.js
2，新建personRoutes.js
3，新建personlist.html,personDetail.html
4，新建personListController.js, personDetailController.js
5，新建View route.cshtml
PersonController.cs中添加：
运行结果
代码：
https://github.com/aspnet/Docs/tree/master/aspnet/client-side/angular/sample/src
Event Handlers
-
新建eventHandlerController.js
-
新建View Event.cshtml
3，PersonController.cs中添加
运行结果：
点击Say Name按钮，会弹出框。
Angular 2.0
下一版本。
相关资源：
