码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS入门

时间:2015-06-02 16:56:10      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:

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中是否生成。

 

技术分享

 

 

 

使用
  1. 新建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

技术分享

 

 

  1. 新建eventHandlerController.js

技术分享

 

 

  1. 新建View Event.cshtml

技术分享

 

 

3,PersonController.cs中添加

 

技术分享

 

 

 

运行结果:

 

技术分享

点击Say Name按钮,会弹出框。

 

Angular 2.0

下一版本。

 

 

 

相关资源:

 

AngularJS入门

标签:

原文地址:http://www.cnblogs.com/heavyhe/p/4546712.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!