最近学习了一下关于AngularJs的知识，发现和Vue还是有非常相似的东西。所以对于学过Vue的自己来说，还是比较好理解的

特点：双向数据绑定，单页面应用

控制器：

　　AngularJs控制器可以控制网页上的DOM元素，也可以响应网页上的单击事件，这一切源于$scope,它是模型(ng-model)于视图(View)

的数据通道。其中$scope起到了一个数据传递作用。

而要实现控制器必须在DOM元素上加上ng-controller( Angular的一个指令), Controller于View是绑定在一起的。当Angluar加载时，它就会加载

读取ng-controller的参数。

模块：

AngularJs的一个非常重要的概念--Module,对于一个Angular应用来说，是由多个模块组成的。同时模块是存在可复用性，可在多个地方被调用。

模板：

　这个地方是Angular比较重要的地方，（同时Vue中也是有的），对于一个项目模板是一个很重要的部分。它能动态的展示不同的视图（页面）。其中

要是使用模块这个功能就必须用到ng-template这个指令;同时使用模块这个一般和ng-view(管理视图）的指令一起使用

路由：

路由是什么，就是我们在应用上要实现页面的跳转，要实现这样的功能就需要使用路由来进行管理。在这里说明一下AngularJs1.2版本之后ngRoute被单独剥离出来，

需要进行重新引用。AngularJS的$route所提供的$routeProvider声明路由

工厂方法：

　这个和java中的工厂方法有点类似，毕竟设计模式这样。就是如果一个对象$scope.xxx要在多个地方调用，就需要去把这个对象个做成单例对象。而在AngularJs里面实现

这种最简单的方式就是调用factory();通过factory()来返回对应的属性方法。

过滤器：

　　格式 {{ name | xx}}  xx: 过滤器得实现 xx一般有（ eg: filter: param), 如果表示否定要在参数(param)前加上！

控制器之间的传值：

　　从上面已经知道$scope是局部作用域，这样的话就不怎么利于控制器之间的传值。当然前面也提到通过工厂方法也可以实现，这就在Angularjs之中有这样的一个概念：

单例服务是AngularJS本身支持的数据和代码共享方式。因为是单例的，所有的控制器访问的便是同一份数据，从而可以很轻松地实现控制器之间地切换。

AngularJs数据的传输本身就提供了多种通信机制：

  • 　　作用域继承：利用子控制器继承父控制器上的数据
  • 注入服务： 把需要功效的数据注册成为一个服务（Service), 在需要的控制器中添加依赖注入
  • 基于事件： 利用AngularJS的事件机制， 使用$on $emit 和 $broadcast;

其实之前的工厂方法就是基于注入服务实现的，接下来要介绍的一种是基于作用域继承的。$rootScope : ng-app 为AngularJS创建的作用域

$watch: 监控数据模型的变化

　　$scope.$watch(watchFn, watchAction, deepWatch);

　　watchFn: 被检测的对象

watchAction: 函数表达式， 发生变化时候被调用，会接收新旧两个值

　　deepWatch: 如果设置为true， 这个可选的布尔型参数将命令AngularJS去检测被监控的对象的每个数据是否发生变化。一般少用，集合多了，容易造成负载严重

提供一个案例来供分析：

<!DOCTYPE html>

<html ng-app="myApp">

<head>

  <title> Hello World in AngularJs </title>

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

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

  <!--

  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

      <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>

 c'f

  -->

</head>

<body>

<div ng-view></div>

<!-- 创建模板 -->

<script type="text/ng-template" id="/todos.html">

  Search: <input type="text" ng-model="search">

  <ul>

    <li ng-repeat="todo in todos | filter: search">

      <input type="checkbox" ng-model="todo.completed">

      <a href="#/{{ $index }}"> {{ todo.name }}</a>

    </li>

  </ul>

</script>

<script type="text/ng-template" id="/todoDetails.html">

  <h1>{{ todo.name }}</h1>

  completed: <input type="checkbox" ng-model="todo.completed">

  note: <textarea>{{todo.note}} </textarea>

</script>

<script>

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

  // 创建工厂方法 实例一个公用对象 注入Todos服务

  app.factory('Todos', function () {

    return [

      { name: '掌握 HTML/CSS/Javascript', completed: true },

      { name: '学习 AngularJS', completed: false },

      { name: '熟悉 NodeJS ', completed: true },

      { name: '接触 ExpressJS', completed: false },

      { name: '搭建 MongoDB database', completed: false },

    ]

  })

  // 创建路由

  app.config(['$routeProvider', function ($routeProvider) {

    $routeProvider

    .when('/', {

        templateUrl: '/todos.html',

        controller: 'TodoController'

      })

    .when('/:id', {

          templateUrl: '/todoDetails.html',

          controller: 'TodoDetailContrl'

      })

  }])

  // 创建控制器

  app.controller('TodoController', ['$rootScope', '$scope', 'Todos', '$filter', function($rootScope, $scope, Todos, $filter) {

    $scope.todos = Todos;

    $scope.$watch('search', function() {

       // 根作用域 相当全局作用域

       $rootScope.data = $filter('filter')($scope.todos, $scope.search);

    })

  }])

  app.controller('TodoDetailContrl', ['$rootScope', '$scope', '$routeParams', 'Todos', function($rootScope, $scope, $routeParams, Todos) {

    $scope.todo = $rootScope.data[$routeParams.id];

  }])

</script>

</body>

</html>

　　

AngularJs 学习 （一）的更多相关文章

  1. Angularjs学习---官方phonecat实例学习angularjs step0 step1

    接下来一系列的文章都是学习https://docs.angularjs.org/tutorial的笔记,主要学习的angular-phonecat项目的实现,来介绍angularjs的使用. 1.下载 ...

  2. angularJS学习资源最全汇总

    基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github ...

  3. 我的AngularJS 学习之旅

    我的AngularJS 学习之旅 基础篇 1.Angular的 起源 2.比较Web 页面实现的几种方式 3.一些基本术语 4.Angular与其他框架的兼容性 5.总结 6.综合实例   很早之前就 ...

  4. 推荐10个很棒的AngularJS学习指南

    AngularJS 是非常棒的JS框架,能够创建功能强大,动态功能的Web app.AngularJS自2009发布以来,已经广泛应用于Web 开发中.但是对想要学习Angular JS 的人而言,只 ...

  5. Angularjs学习---ubuntu12.04中karma安装配置中常见的问题总结

    karma启动时出现了很多问题: 1.安装karma前提条件 安装karma首先要安装nodejs,npm然后才可以安装karma.nodejs,npm的安装过程可以参考文章:Angularjs学习- ...

  6. AngularJs学习总结－了解基本特性（－）

    现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它.之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+ ...

  7. [整理]AngularJS学习资源

    https://angular.io/docs/js/latest/(2.0官方网站) http://www.linuxidc.com/Linux/2014-05/102139.htm(Angular ...

  8. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  9. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  10. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

随机推荐

  1. pandas对excel处理过程中的总结

    在处理excel数据时需要将一组具有相同标签值的数据给按标签抽取出来,同样的标签值对应着同一个类别,这项操作让我对pandas的聚合功能有了更深刻的认识. 所谓聚合groupby,实际上是指将向量或者 ...

  2. 2017-2018-1 20155226 《信息安全系统设计基础》课下实践——实现mypwd

    2017-2018-1 20155226 <信息安全系统设计基础>课下实践--实现mypwd 1 学习pwd命令 输入pwd命令 发现他是给出当前文件夹的绝对路径. 于是 man 1 pw ...

  3. PyQt5 简易计算器

    剩下计算函数(self.calculator)未实现,有兴趣的朋友可以实现它 [知识点] 1.利用循环添加按钮部件,及给每个按钮设置信号/槽 2.给按钮设置固定大小:button.setFixedSi ...

  4. 5285: [Hnoi2018]寻宝游戏

    5285: [Hnoi2018]寻宝游戏 链接 分析: 从下面依次确定运算符号,然后在确定的过程中,需要确定的位数会逐渐减少.比如最后有一个1,如果在从下往上确定了一个or 1,那么再往前可以随便选了 ...

  5. cogs1772 [国家集训队2010]小Z的袜子

    沉迷于文化的我N年没更blog了...(\(N \in (0,1)\)) 然后回到机房就沉迷于 \(generals.io\) 无法自拔...QAQ 然后想打一遍splay(然后是LCT),然后放弃了 ...

  6. PHP Rabbitmq 报错Broken pipe

    fwrite(): send of 13 bytes failed with errno=32 Broken pipe fwrite(): send of 21 bytes failed with e ...

  7. 细说 Django — web 前后端分离

    一.所谓的前后端分离 1.渊源 前端发展史 2.特点 前端:负责 View 和 Controller 层 后端:只负责 Model 层,业务处理/数据等 3.优缺点 优点:解耦,解放前端,职责明确 缺 ...

  8. linux(模糊批量删除文件)删除指定文件夹中某个文件除外的其他文件

    # shopt -s extglob# rm -fr !(file1)如果是多个要排除的,可以这样:# rm -rf !(file1|file2)首先科普下shopt -s extglobBash S ...

  9. Float浮点数的使用和条件

    在这里简单的说一下,我对浮点数的理解,可能说的比较浅,老师也没有说,只是略微的提了一下,完全是我自己个人的理解. 我觉得float浮点数的用法和int的用法有些雷同,浮点数用于计算小数点单位,我们先可 ...

  10. 传输控制协议--- Transmission Control Protocol (TCP)

    Transmission Control Protocol (TCP) 用于网络通信的传输控制和网络协议套件,包括很多协议,其中最主要的是TCP和IP协议.TCP/IP属于UNIX类系统的内置协议,被 ...