AngularJs系列实战 Angularjs名词与概念（一）【转】-白红宇

AngularJs系列实战 Angularjs名词与概念（一）【转】

阅读量：6364 次

发布时间：2019-06-23

本文共 5266 字，大约阅读时间需要 17 分钟。

2. 前言

Angularjs开发CRUD类型的Web系统生产力惊人，与jQuery,YUI,kissy,Extjs等前端框架区别非常大，初学者在学习的过程中容易以自己以往的经验来学习Angularjs 往往走入误区，最典型的特征是在的开发过程中，使用大量的指令（directive） 来实现许多操作DOM的功能，从而失去了angularjs快速开发的特性，最后不得不放弃使用。此系列的文章并不会像其他介绍Angularjs技术文档一样将每个技术细节统统照顾到，而是通过实战项目先让初学者有个大概的了解，然后大家在由浅入深逐渐熟悉每一个细节。

写此博客的时候angularjs官方稳定版已经更新到 “”，内部测试版更新到“2.0.0-alpha.30”
本篇博客使用angularjs 版本

首先放一个招牌Demo:

3.Angularjs名词与概念

2.1 单页Web应用（SinglePage）:

顾名思义，只使用一个页面的Web应用程序.单页面应用是指用户通过浏览器加载独立的HTML页面，Ajax加载数据页面无刷新，实现操作各种操作。

2.2 模板（template）:

这里的模板是指前端模板，在angularjs 之外已经有非常丰富的JavaScript模板引擎了，例如artTemplate，Mustache，doT.js等。

Angularjs 内置有自己的模板引擎。

通过下面的DEMO我们一起了解一下Angularjs 内置模板引擎：

    angularjs 模板解释            
               
                
        
         {
        {
        val}}
        
        
                
                    
         {
        {item.title}}
        
        
        
                
        
                     Angularjs条件语句

以上代码首先创建一个"Yiim"模块，然后在模块中添加了一个名词为"tmplController"的控制器，然后给scope添加三个属性“val”，“list”，“hasValue”，并赋值。

在模板页面设置angularjs作用域为"body"标签内,名词为"Yiim"

在作用域中设置控制器为"tmplController"

例子中提供了3种输出方式（普通输出，循环，条件语句），当然angularjs不仅仅这几种方式

“ng-repeat”，“ng-if” 这都是通过指令实现。我们在下一节（2.5 ）将详细讲解

2.3 控制器（controller）:

控制器可以理解为控制页面某个区块的方法。其中有一个非常重要的对象 $scope是这个控制器与页面控制器区域沟通的桥梁。angularjs最精华的部分是双向绑定，失去了双向绑定angularjs就失去了自己的灵魂。这也是和其他以DOM操作的框架比最大的区别。放DEMO ``` html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>angularjs控制器介绍</title> <script src="http://files.cnblogs.com/files/Arrays/angular.min.js"></script> <script type="text/javascript"> (function () { var app = angular.module("Yiim", []); app.controller("cntoController", ["$scope", function ($scope) {

var defaults = "知乎 - 与世界分享你的知识、经验和见解";

//设置值

$scope.val = defaults;

$scope.click = function () {

$scope.val = defaults;

};

}]);

})()

{

{val}}

重置

```

控制器演示效果

控制器演示图片

与2.2节例子相同是,我们首先创建了一个模块，然后在模块中添加一个控制器方法 "cntoController".

在控制器里我们给scope添加了一个属性"val" 和一个方法 "click"。

在页面中我们使用"ng-model"指令绑定控制器中设置的"val"

紧接着我们把绑定的值输出处理


       
        {
       {val}}

通过内置的绑定方法click 我们重置字符串

$scope.click = function () {       $scope.val = defaults;};

2.4 路由（route）:

单页Web应用由于没有后端URL资源定位的支持，需要自己实现URL资源定位。angularjs使用浏览器URL "#" 后的字符串来定位资源，区分不同的功能模块。

路由并非在angularjs核心文件内，你需要另外加入一段脚本 “angular-route.min.js”

需要注意的是在创建 “app” 对象是需要填写对 ngRoute 依赖

var app = angular.module("Yiim", ['ngRoute']);//注意 ngRoute

下面我们同样的展示一个demo

主页面 route.html

    angularjs路由介绍                
       
        列表

列表页面 route-list.html


           
        {
       {item.title}}

详细页面 route-view.html


           
        
         网站ID：{
       {model.id}}
        
    
        
         网站名称：
         {
       {model.title}}
        
    
        
         访问地址：{
       {model.url}}

演示效果：

angularjs路由

以上代码中，我们首先配置了三条个处理个局部页面的路由

路由处理列表页并设置控制器为"listController",指定模板页为"route-list.html"

route.when('/list', { controller: 'listController', templateUrl: 'route-list.html' });

与上面不同的是第二条路由中包含":id"用于捕获URL后面的参数。

route.when('/view/:id', { controller: 'viewController', templateUrl: 'route-view.html' });

处理所有未匹配到的路由跳转到 "'/list'"内。

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

我们还使用了模块方法 "factory" 创建一个"service" 服务，用于获取数据列表

后面我们声明了两个控制器"listController","viewController",同时配置对"service"的依赖，"viewController" 中我们还添加对 "$routeParams" 的依赖，用于获取路由捕获的id。

需要注意的是我们再主页面声明了"ng-view"用于指定局部页面和控制器作用范围。

2.5 指令（directive）:

指令（directive）并不是什么高深的东西，我们简单理解为通过声明特殊的标签，属性..等来处理浏览器无法渲染的功能。通过JavaScript将指令替换成浏览器可以识别的标签。

当前这不是它存在的唯一意义。在上面的例子中我们已经见到了“ng-if”,"ng-repeat"等这些angularjs 内置的指令。当然我们也可以定义自己使用的指令。

通过指令可以实现对DOM操作

可以跟加简洁的实现某些功能

通过指令可以集成其他插件例如jQuery插件

    angularjs指令演示                
           
       
                                                               选择                           网站ID                           网站名称                           链接地址                      
                
                                                                                         {
        {item.id}}                           {
        {
        item.title}}                           {
        {item.url}}

选择	网站ID	网站名称	链接地址
	{ {item.id}}	{ { item.title}}	{ {item.url}}

演示效果

angularjs指令

上面的例子中，我们使用模块创建了一个指令"imCheck",并在指令方法"link"注册了使用当前指令的dom对象注册了两个delegate方法处理全选和子选择项状态改变处理的方法。

"imCheck" 对应在html页面的属性为 "im-check" 注意大小写。

还要注意的是我们使用了jQuery来操作dom节点。

2.6 前端模块化开发:

模块化开发不是什么新鲜的概念，后端开发过程中包,类库这些把功能相近的东西放在一起。前端开发很长一段时间混乱无比，脚本之间的冲突，依赖，变量函数覆盖各种奇奇怪怪的问题。模块化开发在前端的定义：将功能相近的组件封装到一块，通过前端依赖注入解决依赖顺序和变量作用域的问题. 代表框架有,。

使用模块化编程实现angularjs多种模块，解决依赖问题

    angularjs 模块化开发            
       
        {
        {
        service.key}}

2.7 过滤器（filter）:

angularjs过滤器,用来格式化数据(转化，排序，筛选等操作)。

    angularjs 过滤器            
               
        输入过滤：
        
        
        
                    
                         {
        {
         (x.Name | uppercase) + ', ' + x.country }}

演示效果

过滤器

我们使用angularjs内置的过滤器 "filter","orderBy"。

x in names | filter:name | orderBy:'Country'

含义为将集合 "names" 传入过滤器 "filter"匹配字符串为"name"的项目，然后将匹配后的集合传入 "orderBy"过滤器，以"Country"属性进行排序。

在输出变量时我们使用"uppercase"过滤器转化大小写

x.Name | uppercase

转载于:https://www.cnblogs.com/guangmangchen/p/5211827.html

你可能感兴趣的文章

Python 比特币教程之二：机器人收发比特币

查看>>

虎牙直播在微服务改造方面的实践和总结

查看>>

怎样将优酷网站下载的视频KUX转MP4格式

shields小徽章是如何生成的？以及搭建自己的shield服务器

查看>>

猫头鹰的深夜翻译：spring事务管理

查看>>

记一次使用Spring REST Docs + travis + github自动生成API接口文档的操作步骤（下）...

查看>>

1、集合 2、Iterator迭代器 3、增强for循环 4、泛型

查看>>

关于/var/run/docker.sock

查看>>

SCrapy爬虫大战京东商城

查看>>

用 JavaScript 实现链表操作 - 11 Alternating Split

目录

2. 前言

3.Angularjs名词与概念

2.1 单页Web应用（SinglePage）:

2.2 模板（template）:

2.3 控制器（controller）:

2.4 路由（route）:

2.5 指令（directive）:

2.6 前端模块化开发:

2.7 过滤器（filter）: