AngularJs 60分钟基础教程

AngularJs是开发SPA应用程序的好框架。单页网络应用程序是只有一个网页的应用程序。一开始浏览器会加载必要的HTML、CSS和JavaScript，所有的操作都会在这个页面上完成，JavaScript会控制这个页面上不同视图的呈现。本文来源于Youtube上一段很好的AngularJs入门教程视频：《60分钟左右的AngularJs基础》，主要讲解Angular JS中指向性、数据绑定、过滤器、模块的概念和用法。个人认为这四个概念是AngularJs的核心，支撑着AngularJs的骨架。掌握它们对整体掌握AngularJs很有帮助。进阶需要大量练习和阅读官网API文档。

请看下图，大致了解AngularJs能做什么。

首先从官网下载angular.min.js和angular-route.min.js。可从官方网站(https://angularjs.org/或https://code.angularjs.org/)下载。

在vs中创建一个空的空网站项目

指令和数据绑定。

AngularJs中的方向性概念不容易理解，但可以理解为一种在开始阶段用来扩展HTML的标签。Angularjs将解析这些标签，实现Angular JS的魔力。下面的代码使用了两个方向：ng-app和ng-model。

ng-app:用于自动引导的AngularJs应用程序。这是一个必要的指令，通常被添加到HTML的根对象中(如下面的代码所示)。更详细的解释，请转到官方网站：https://docs.angularjs.org/api/ng/directive/ngApp.

NgModel:用于在property和HTML控件(input、select、textarea)之间建立双向数据绑定，也就是说HTML控件的值变化会反映在property上，反之亦然。属性是由{{}}创建的对象。

下面的代码显示在文本控件和名称之间建立了数据绑定。

！DOCTYPE html html ng-app head title使用指令和数据绑定语法/title/head ydiv class=' container ' name : input type=' text ' ng-model=' name '/{ { name } }/div script src=' http : angular . min . js '/script/body/html directive的前缀可以是“x-”或“data-”。指令可以放在元素名称、属性、类和注释中。

！DOCTYPE html html Data-ng-app=' head title using directions and Data Binding语法/title/head ydiv class=' container ' name : input type=' text ' Data-ng-model=' name '/{ { name } }/div script src=' http 3360 angular . min . js '/script/body/html以下是html运行后的结果。

以下示例显示了通过ng-init和ng-repeat遍历数组的用法。

！DOCTYPE html html data-ng-app=' ' head title用ng-repeat指令迭代/title/head mdy div class=' container ' data-ng-init=' name=[' Terry '，' William '，' Robert '，' Henry ']' H3用ng-repeat指令循环/h3u lli data-ng-repeat=' name in name ' { name } }/Li/ul/div script src=' http 3360 angular . min . js '/script/body/html

关于directve的更多用法，请参考https://docs.angularjs.org/api.官方网站

过滤器

功能是接收输入，按照一定的规则进行处理，然后返回处理后的结果。它主要用于筛选数组、对数组中的元素进行排序以及格式化数据。

有些过滤器内置在AngualrJS中，它们是：货币、日期、过滤器、json、limitTo、小写、大写、数字、orderBy。一共九个。此外，您还可以自定义过滤器，它功能强大，可以满足任何所需的数据处理。

下面的代码展示了数据过滤、排序和案例转换的实现。每个筛选器都跟在数据后面，并由|分隔。

！DOCTYPE html html data-ng-app=' ' head title using Filter/title/head dydiv class=' container ' data-ng-init=' customers='[{name: '胡清蓝'，city 3360 '凤凰' }，{name: '特里宋'，city 3360 '纽约' }，{ name : '特里道'，city 3360 '纽约' }，{ name 3: '亨利道'，city: '纽约' }]' name '

组件

模块是一个容器，用于管理AngularJS应用程序的所有部分。这是AngularJS中一个非常重要的概念。AngularJS应用程序是一个模块，它的功能类似于C#应用程序中的Assembly。在C#中，我们通过主函数引导应用程序。而AngularJS通过na-app='moduleName '引导一个AngularJS应用程序。模块名称是模块对象的名称。

下图显示了模块的常见组件。

Config/Route:用于配置AngularJS应用的路由，其功能类似于ASP.NET MVC应用中的Config/Route。如上所述，过滤器：过滤数据。

Directive:扩展了HTML和Angular JS中最重要的概念。没有指令就没有角度。

控制器：的功能类似于ASP.NET MVC应用中的控制器。页面逻辑在控制器中实现，模型可以由控制器操作。AngularJS通过内置的数据绑定机制将模型绑定到视图(HTML控件)。

工厂/服务/提供商/值：提供对数据源的访问。例如，Restful API就是一个常见的数据源。通过controller factory/service/provider/value访问数据源，完成数据的CRUD操作。

下面的代码实现了与上述示例相同的功能，但不同的是，本示例通过创建一个模块(angularJS应用程序)并在该模块下添加contorller来实现上述功能。在SimpleController(控制器)中，我们创建客户(模型)并初始化数据，而View(Html控件)直接绑定到客户(模型)。范围是一个语言中所有视图模块的容器对象。控制器需要传递的范围是一个语言中所有视图模块的容器对象。控制器需要通过作用域访问视图模块。

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

！DOCTYPE html html data-ng-app=' demo app ' head title使用模块Controller/title/head dydiv data-ng-Controller=' simple Controller ' name 3360 br/input type=' text ' data-ng-model=' name '/br/ulli data-ng-repeat=' cust in customers | filter : name | order by : ' city ' ' { { cust。名称|大写}} - {{cust.city |小写}}/li/ul/divscript src='demo app。控制器('简单控制器'，函数($ scope){ $ scope。客户=[{ name: '胡清蓝，城市3360 '凤凰}，{ name: '特里宋，城市3360 '纽约}，{ name: '特里道，城市3360 '纽约}，{ name : '亨利道，城市3360 '纽约' }];});/脚本/正文/html！DOCTYPE html html data-ng-app=' demo app ' head title使用Controller/title/head dydiv data-ng-Controller=' simple Controller ' name 3360 br/input type=' text ' data-ng-model=' name '/br/ulli data-ng-repeat=' cust in customers | filter : name | order by : ' city ' ' { { cust。名称|大写}} - {{cust.city |小写}}/li/ul/divscript src='httpvar控制器={ };控制器简单控制器=函数($ scope){ $ scope。客户=[{ name: '胡清蓝，城市3360 '凤凰}，{ name: '特里宋，城市3360 '纽约}，{ name: '特里道， '纽约}，{ name : '亨利道，城市3360 '纽约' }];}demoApp.controller(控制器);/脚本/正文/html！DOCTYPE html数据-ng-app=' Demoapp '标题使用Controller/title/head dydiv数据-ng-view=' '/div/div脚本src=' http : angular。量滴js '/script script src=' http : angular-route。量滴js '/script脚本var Demoapp=angular。模块(' Demoapp '，[' ngRoute '])；demoApp.config(函数($ RouterProvider){ $ RouterProvider。当('/'，{ controller : ' simple controller '，模板URL : ' Partials/view1。html ' }).当('/view2 '，{ controller : ' simple controller '，模板URL : ' Partials/view 2。html ' }).否则({ redirectto : '/' })；});定义变量控制器={ };控制器简单控制器=函数($ scope){ $ scope。客户=[{ name: '胡清蓝，城市3360 '凤凰}，{ name: '特里宋，城市3360 '纽约}，{ name: '特里道， '纽约}，{ name : '亨利道，城市3360 '纽约' }];$ scope。addcustomer=function(){ $ scope。顾客。push({ name : $ scope。新客户。名字，城市3360美元范围。新客户。city })；};}demoApp.controller(控制器);/脚本/正文/html

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

下面实例通过配置配置组件的途径实现一个矿泉实例。首先创建View1.html和View2.html。目录结构如下图。

div2h视图1/H2名称： br/输入类型=' text '数据-ng-model='筛选器。name '/br/ulli data-ng-repeat=' cust in customers | filter : filter。名称|按：“城市”排序{ { cust。名称|大写}} - {{cust.city |小写} }/Li/ulbr/客户名称3360 br/输入类型=“文本”数据-ng-模型=“新客户”。名称'/br/客户城市333

通过$routeProvider来配置当前页面中视图一和视图2的路由，已经每个视角所对应的控制器。视图一和视图2会显示在当前页面标注了ng-view的位置。

同时通过配置我们解耦了控制器和超文本标记语言标签。上面的例子，我们需要给超文本标记语言标签添加ng-控制器标签来使用控制器。这边直接通过配置完成这样的配置。

！DOCTYPE html html data-ng-app=' Demoapp ' head title view/title/head dydiv data-ng-view=' '/div/div script src=' http 3360 angular。量滴js '/script script src=' http : angular-route。量滴js '/script脚本var Demoapp=angular。模块(' Demoapp '，[' ngRoute '])；demoApp.config(函数($ RouterProvider){ $ RouterProvider。当('/'，{ controller : ' simple controller '，模板URL : ' Partials/view1。html ' }).当('/view2 '，{ controller : ' simple controller '，模板URL : ' Partials/view 2。html ' }).否则({ redirectto : '/' })；});定义变量控制器={ };控制器简单控制器=函数($ scope){ $ scope。客户=[{ name: '胡清蓝，城市3360 '凤凰}，{ name: '特里宋，城市3360 '纽约}，{ name: '特里道， '纽约}，{ name : '亨利道，城市3360 '纽约' }];$ scope。addcustomer=function(){ $ scope。顾客。push({ name : $ scope。新客户。名字，城市3360美元范围。新客户。city })；};}demoApp.controller(控制器);/脚本/正文/html效果如下图。

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

！DOCTYPE html html数据-ng-app=' Demoapp '标题使用Factory/title/head dydiv数据-ng-view=' '/div/div脚本src=' http : angular。量滴js '/script script src=' http : angular-route。量滴js '/script脚本var Demoapp=angular。模块(' Demoapp '，[' ngRoute '])；demoApp.config(函数($ RouterProvider){ $ RouterProvider。当('/'，{ controller : ' simple controller '，模板URL : ' Partials/view1。html ' }).当('/view2 '，{ controller : ' simple controller '，模板URL : ' Partials/view 2。html ' }).否则({ redirectto : '/' })；});demoApp.factory('simpleFactory '，function(){ var customers=[{ name : '胡清蓝，城市3360 '凤凰}，{ name: '特里宋，城市3360 '纽约}，{ name: '特里道，城市3360 '纽约}，{ name : '亨利道，城市3360 '纽约' }];var factory={ }；工厂。get customers=function(){ return customers；}返厂；});定义变量控制器={ };控制器简单控制器=函数($ scope，简单工厂){ $ scope。客户=[]；init()；函数init(){ $ scope。客户=简单工厂。getcustomers()；} $ scope。addcustomer=function(){ $ scope。顾客。push({ name : $ scope。新客户。名字，城市3360美元范围。新客户。city })；};}demoApp.controller(控制器);/脚本/正文/html以上内容是小编给大家介绍的AngularJs 60分钟入门基础教程，希望对大家以上帮助！