AngularJS 是一个创建富客户端应用的JavaScript MVC框架。你仍然需要具有服务端后台，但大多数的用户交互逻辑将放到客户端上处理。它可以创建单页的应用程序，一个页面的应用仅仅需要HTML,CSS和JavaScript在客户端。它的目标是增强页面的模型-视图-控制（MVC）的功能，为简化开发和测试。单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，由JavaScript来控制不同view在这个页面上的呈现。本文源于Youtube上一个不错的AngularJs的入门教程视频：AngularJS Fundamentals In 60-ish Minutes，主要讲解了AngularJs中Directive,Data Binding,Filter和Module的概念和用法。个人认为这四个概念是AngularJs的核心，支撑起了AngularJs的骨架。掌握了他们对全局上把握AngularJs很有帮助。进阶则需要大量实践和官网API文档的阅读。

看看下图大致就可以了解AngularJs有何能耐。

首先从官网下载angular.min.js和angular-route.min.js。 可以从官网下载（https://angularjs.org/或https://code.angularjs.org/）

在VS中创建一个空的Empty Web项目。

Directive 和 Data Binding

AngularJs 中的Directive概念不是很容易理解，入门阶段可暂且将其理解为用来扩展HTML的一种tag. Angularjs会解析这些tag，以实现Angularjs的Magic.

可以对照传统的Imperative UI来理解AngularJs的Declarative UI:

AngularJs之前我们实现前台页面逻辑一般是通过给HTML元素设置ID，然后使用Javascript或jQuery来操纵HTML DOM，这就是典型的Imperative UI。 而AngularJs不再需要给HTML元素设置ID，而使用Declarative,由Declarative“指导”HTML 元素的行为。个人认为这样的好处之一就是开发人员看到一个HTML 元素及其Directive大概就可以理解其运行时的行为。而在传统的Imperative UI中，HTML 元素的ID信息并不能给你带来任何有用的信息。

下面代码使用了两个Directive：ng-app 和 ng-model.

ng-app: 用于auto-bootstrap 一个AngularJs应用。这是必须的一个Directive，一般加在HTML的根对象上（如下代码所示）。更详细解释，移步官网：https://docs.angularjs.org/api/ng/directive/ngApp

ngModel： 用于在property和HTML控件（input,select, textarea）之间建立双向的Data Binding，也就是说HTML控件的值改变会反应到property上，反过来也同样成立。property就是通过{{}}创建的一个对象。

下面代码展示了将文本控件和name之间建立了Data Binding.

<!DOCTYPE html>

<html ng-app>

<head>

    <title>Using Directives and Data Binding Syntax</title>

</head>

<body>

    <div class="container">

        Name: <input type="text" ng-model="name" /> {{name}}

    </div>

    <script src="angular.min.js"></script>

</body>

</html>

Directive可以用“x-”或者“data-”作为前缀。Directive可以放置于元素名、属性、class、注释中。

<!DOCTYPE html>

<html data-ng-app="">

<head>

    <title>Using Directives and Data Binding Syntax</title>

</head>

<body>

    <div class="container">

        Name: <input type="text" data-ng-model="name" /> {{name}}

    </div>

    <script src="angular.min.js"></script>

</body>

</html>

下面是HTML运行以后的结果。

下面例子展示了通过ng-init和ng-repeat来遍历操作一个数组的用法。

<!DOCTYPE html>

<html data-ng-app="">

<head>

    <title>Iterating with the ng-repeat Directive</title>

</head>

<body>

    <div class="container" data-ng-init="names = ['Terry','William','Robert','Henry']">

        <h3>Looping with the ng-repeat Directive</h3>

        <ul>

            <li data-ng-repeat="name in names">{{name}}</li>

        </ul>

    </div>

    <script src="angular.min.js"></script>

</body>

</html>

更多directve的用法，参考官网https://docs.angularjs.org/api

Filter

作用就是接收一个输入，通过某个规则进行处理，然后返回处理后的结果。主要用于对数组过滤，对数组中的元素进行排序, 对数据做格式化处理等。

AngualrJS内置了一些过滤器，它们是：currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。总共九种。除此之外还可以自定义过滤器，这个就强大了，可以满足任何要求的数据处理。

下面代码展示了数据过滤，排序和大小写转换的实现。每个Filter跟在数据后，并有|隔开。

<!DOCTYPE html>

<html data-ng-app="">

<head>

    <title>Using Filter</title>

</head>

<body>

    <div class="container" data-ng-init="customers = [{name:'Terry Wu',city:'Phoenix'},

         {name:'Terry Song',city:'NewYork'},{name:'Terry Dow',city:'NewYork'},

         {name:'Henry Dow',city:'NewYork'}]">

        Names:

        <br />

        <input type="text" data-ng-model="name" />

        <br />

        <ul>

            <li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>

        </ul>

    </div>

    <script src="angular.min.js"></script>

</body>

</html>

运行的结果：

Module

Module就是一个容器，用于管理一个AngularJS应用的各个部分，是AngularJS中很重要的概念。一个独立的AngularJS功能模块可以封装成一个Module，其作用和C#应用程序中Assembly作用类似。C#中我们通过main函数来bootstrap应用程序。而AngularJS则通过na-app="moduleName"的方式来bootstrap一个AngularJS功能模块。moduleName就是Module对象的name.

下图是一个Module有哪些常见部分组成。
Config/Route:用于配置AngularJS应用的路由（AngularJS），作用类似于ASP.NET MVC应用中的Config/Route。
Filter:对数据起过滤作用，上文有解释。
Directive: 扩展HTML,AngularJS中最重要的概念。没有Directive就没有AngularJS。
Controller: 作用类似于ASP.NET MVC应用中的Controller。作用有两个：实现页面上的业务逻辑，以及对$scope(model)进行操作。 AngularJS则通过内建的Data-Binding机制将model绑定到view(HTML控件)。使用了angularJS后,一般不会通过代码对HTML DOM元素进行操作 （这正是angularJS的神奇之处）。
Factory/Service/Provider/Value: 提供方法供Controller使用。 大多数时候通过他们实现对数据源的访问，以及实现一些通用的逻辑以在不同的Controller中共享。比如Restful API就是常见的数据源。

下面这段代码实现了上面实例的相同的功能，差异就在于这个实例通过创建一个module（angularJS应用），并在module下添加contorller来实现上面的功能。在SimpleController（Controller）中，我们创建了customers（Model）并进行数据初始化， View(Html控件）则直接绑定到customers（Model）。$Scope是一个AngualrJs moduel中所有model的容器对象。Controller需要通过$Scope来访问model。View则通过$Scope来访问Controller和model。

这个例子比上面例子更接近实际工程中的用法。

<!DOCTYPE html>

<html data-ng-app="demoApp">

<head>

    <title>Using  module Controller</title>

</head>

<body>

    <div data-ng-controller="SimpleController">

        Names:

        <br />

        <input type="text" data-ng-model="name" />

        <br />

        <ul>

            <li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>

        </ul>

    </div>

    <script src="angular.min.js"></script>

    <script>

        var demoApp = angular.module("demoApp", []);

        demoApp.controller("SimpleController", function ($scope) {

            $scope.customers = [

                { name: 'Terry Wu', city: 'Phoenix' },

                { name: 'Terry Song', city: 'NewYork' },

                { name: 'Terry Dow', city: 'NewYork' },

                { name: 'Henry Dow', city: 'NewYork' }

            ];

        });

    </script>

</body>

</html>
<!DOCTYPE html>

<html data-ng-app="demoApp">

<head>

    <title>Using Controller</title>

</head>

<body>

    <div data-ng-controller="SimpleController">

        Names:

        <br />

        <input type="text" data-ng-model="name" />

        <br />

        <ul>

            <li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>

        </ul>

    </div>

    <script src="angular.min.js"></script>

    <script>

        var demoApp = angular.module("demoApp", []);

        var controllers = {};

        controllers.SimpleController = function ($scope) {

            $scope.customers = [

                { name: 'Terry Wu', city: 'Phoenix' },

                { name: 'Terry Song', city: 'NewYork' },

                { name: 'Terry Dow', city: 'NewYork' },

                { name: 'Henry Dow', city: 'NewYork' }

            ];

        }

        demoApp.controller(controllers);

    </script>

</body>

</html>
<!DOCTYPE html>

<html data-ng-app="demoApp">

<head>

    <title>Using Controller</title>

</head>

<body>

    <div>

        <div data-ng-view=""></div>

    </div>

    <script src="angular.min.js"></script>

    <script src="angular-route.min.js"></script>

    <script>

        var demoApp = angular.module('demoApp', ['ngRoute']);

        demoApp.config(function ($routeProvider) {

            $routeProvider

                .when('/',

                {

                    controller: 'SimpleController',

                    templateUrl: 'Partials/View1.html'

                })

                .when('/view2',

                {

                    controller: 'SimpleController',

                    templateUrl: 'Partials/View2.html'

                })

                .otherwise({redirectTo:'/'});

        });

        var controllers = {};

        controllers.SimpleController = function ($scope) {

            $scope.customers = [

                { name: 'Terry Wu', city: 'Phoenix' },

                { name: 'Terry Song', city: 'NewYork' },

                { name: 'Terry Dow', city: 'NewYork' },

                { name: 'Henry Dow', city: 'NewYork' }

            ];

            $scope.addCustomer = function () {

                $scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city });

            };

        }

        demoApp.controller(controllers);

    </script>

</body>

</html>

下图展示了Module及其各个组成部分的关系。

下面实例通过config配置module的route实现一个SPA实例。首先创建View1.html 和View2.html。 目录结构如下图.

<div>

    <h2>View1</h2>

    Names:

    <br />

    <input type="text" data-ng-model="filter.name" />

    <br />

    <ul>

        <li data-ng-repeat="cust in customers | filter:filter.name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>

    </ul>

    <br />

    Customer Names:<br />

    <input type="text" data-ng-model="newCustomer.name" />

    <br />

    Customer City:<br />

    <input type="text" data-ng-model="newCustomer.city" />

    <br />

    <button data-ng-click="addCustomer()">Add Customer </button>

    <br />

    <a href="#/view2">View 2</a>

</div>

View1.html

<div>

    <h2>View2</h2>

    City:

    <br />

    <input type="text" data-ng-model="city" />

    <br />

    <ul>

        <li data-ng-repeat="cust in customers | filter:city | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>

    </ul>

</div>

View2.html

通过$routeProvider来配置当前页面中view1 和view2 的路由，已经每个view所对应的controller。 view1和view2会显示在当前页面标注了ng-view的位置。

同时通过config我们解耦了controller和HTML标签。 上面的例子，我们需要给html标签添加ng-controller tag来使用controller。这边直接通过config完成这样的配置。

<!DOCTYPE html>

<html data-ng-app="demoApp">

<head>

    <title>View</title>

</head>

<body>

    <div>

        <div data-ng-view=""></div>

    </div>

    <script src="angular.min.js"></script>

    <script src="angular-route.min.js"></script>

    <script>

        var demoApp = angular.module('demoApp', ['ngRoute']);

        demoApp.config(function ($routeProvider) {

            $routeProvider

                .when('/',

                {

                    controller: 'SimpleController',

                    templateUrl: 'Partials/View1.html'

                })

                .when('/view2',

                {

                    controller: 'SimpleController',

                    templateUrl: 'Partials/View2.html'

                })

                .otherwise({redirectTo:'/'});

        });

        var controllers = {};

        controllers.SimpleController = function ($scope) {

            $scope.customers = [

                { name: 'Terry Wu', city: 'Phoenix' },

                { name: 'Terry Song', city: 'NewYork' },

                { name: 'Terry Dow', city: 'NewYork' },

                { name: 'Henry Dow', city: 'NewYork' }

            ];

            $scope.addCustomer = function () {

                $scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city });

            };

        }

        demoApp.controller(controllers);

    </script>

</body>

</html>

效果如下图。

最后一个实例更接近实际工程中的用法，引入了Factory来初始化数据（实际工程中,在这里可访问webAPI获取数据完成初始化），Controller中则通过Factory获得数据。

<!DOCTYPE html>

<html data-ng-app="demoApp">

<head>

    <title>Using Factory</title>

</head>

<body>

    <div>

        <div data-ng-view=""></div>

    </div>

    <script src="angular.min.js"></script>

    <script src="angular-route.min.js"></script>

    <script>

        var demoApp = angular.module('demoApp', ['ngRoute']);

        demoApp.config(function ($routeProvider) {

            $routeProvider

                .when('/',

                {

                    controller: 'SimpleController',

                    templateUrl: 'Partials/View1.html'

                })

                .when('/view2',

                {

                    controller: 'SimpleController',

                    templateUrl: 'Partials/View2.html'

                })

                .otherwise({ redirectTo: '/' });

        });

        demoApp.factory('simpleFactory', function () {

            var customers = [

                { name: 'Terry Wu', city: 'Phoenix' },

                { name: 'Terry Song', city: 'NewYork' },

                { name: 'Terry Dow', city: 'NewYork' },

                { name: 'Henry Dow', city: 'NewYork' }

            ];

            var factory = {};

            factory.getCustomers = function ()

            {

                return customers;

            }

            return factory;

        });

        var controllers = {};

        controllers.SimpleController = function ($scope, simpleFactory) {

            $scope.customers = [];

            init();

            function init() {

                $scope.customers = simpleFactory.getCustomers();

            }

            $scope.addCustomer = function () {

                $scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city });

            };

        }

        demoApp.controller(controllers);

    </script>

</body>

</html>

AngularJs 基础（60分钟入门）的更多相关文章

  1. PyTorch 60 分钟入门教程

    PyTorch 60 分钟入门教程:PyTorch 深度学习官方入门中文教程 http://pytorchchina.com/2018/06/25/what-is-pytorch/ PyTorch 6 ...

  2. [PyTorch入门之60分钟入门闪击战]之入门

    深度学习60分钟入门 来源于这里. 本文目标: 在高层次上理解PyTorch的Tensor库和神经网络 训练一个小型的图形分类神经网络 本文示例运行在ipython中. 什么是PyTorch PyTo ...

  3. AngularJs 基础（60分钟入门） (转)

    AngularJs是一个不错的用于开发SPA应用(单页Web应用)的框架.单页Web应用(single page web application,SPA),就是只有一张Web页面的应用.浏览器一开始会 ...

  4. iOS开发60分钟入门

    原文:https://github.com/qinjx/30min_guides/blob/master/ios.md 本文面向已有其它语言(如Java,C,PHP,Javascript)编程经验的i ...

  5. 0基础一分钟入门Python

    这篇文章面向所有想学python的小伙伴(甚至你从没听过编程),这篇文章将会带你以最快的速度入门python.赶快上车,时间来不及了... 一,下载和安装python 1.下载: 1.1 python ...

  6. PyTorch深度学习：60分钟入门(Translation)

    这是https://zhuanlan.zhihu.com/p/25572330的学习笔记. Tensors Tensors和numpy中的ndarrays较为相似, 因此Tensor也能够使用GPU来 ...

  7. 零基础一分钟入门Python

    这篇文章面向所有想学python的小伙伴(甚至你从没听过编程),这篇文章将会带你以最快的速度入门python.赶快上车,时间来不及了... 一,下载和安装python 1.下载: 1.1 python ...

  8. 深入浅出java 8 lambda表达式--零基础一分钟入门

    lambda从使用上来说,第一感觉直白的理解就是,少了很多不必要的匿名回调类的写法,比如: public static void main(String[] args) { PlatformQuery ...

  9. PyTorch 60 分钟入门教程：PyTorch 深度学习官方入门中文教程

    什么是 PyTorch? PyTorch 是一个基于 Python 的科学计算包,主要定位两类人群: NumPy 的替代品,可以利用 GPU 的性能进行计算. 深度学习研究平台拥有足够的灵活性和速度 ...

随机推荐

  1. swift 代码添加按钮

    var btn = UIButton(frame: CGRect(x: 200, y: 200, width: 100, height: 100)) btn.setTitle("jichen ...

  2. 第1章 C#类型基础

    1.1值类型和引用类型 1.1.1 值类型 使用值类型之前需要对值类型的所有元素初始化(普通值类型和结构体). 结构还有一个特性:调用结构上的方法前,需要对其所有的字段进行赋值,为了避免对结构体中所有 ...

  3. iOS出现<object returned empty description>的解决方法

    iOS出现<object returned empty description>的解决方法: 使用  [str length] <= 0  判断处理

  4. ubuntu下安装迅雷

    ----------------------------------2016-03-28新增适用于ubuntu16.04系列的安装包---------------------------------- ...

  5. java基础之：堆排序

    最近做题目饱受打击,愈发觉得打好基础的重要性,于是乎,决心把基本的排序算法还有数组操作一一实现,目的在于一方面能够得到对JAVA基础的巩固,另一面在实现的过程中发现不足. 今天所实现的堆排序(最大堆) ...

  6. 第六周PSP

    [week6]psp  工作周期:10.20-10.27  本周PSP     C类型 C内容 S开始时间 ST结束时间 I中断时间 T净时间(分) 活动 开事后诸葛亮会议 13:00 14:00 0 ...

  7. python学习笔记-Day6(2)

    xml处理模块 xml是实现不同语言或程序之间进行数据交换的协议,跟json差不多,但json使用起来更简单,不过,古时候,在json还没诞生的黑暗年代,大家只能选择用xml呀,至今很多传统公司如金融 ...

  8. 1057. Stack (30)

    分析: 考察树状数组 + 二分, 注意以下几点: 1.题目除了正常的进栈和出栈操作外增加了获取中位数的操作, 获取中位数,我们有以下方法: (1):每次全部退栈,进行排序,太浪费时间,不可取. (2) ...

  9. C#压缩文件 不压缩路径

    我想把 E:\\AA\BB\11.txt 压缩后存入 E:\\AA1\BB1\11.rar 但是当我解压( E:\\AA1\BB1\11.rar)的时候,发现:11.txt 不是在 E:\\AA1\B ...

  10. java for循环和数组--冒泡排序、二分查找法

    //100以内与7相关的数   for(int a=1;a<=100;a++){    if(a%7==0||a%10==7||a/10==7){     System.out.print(a+ ...