• angularjs第二章
      • 自定义指令
        • scope
          • 控制器
            • AngularJS控制器控制AngularJS应用程序的数据，是常规的JavaScript对象。
            • ng-controller指令就是用来定义应用程序控制器的，并且同时创建了一个新的作用域关联到相应的DOM元素上。
            • 所谓作用域就是一个指向应用模型的对象，它是表达式的执行环境，作用域有层次结构，这个层次和相应的DOM几乎是一样的，作用域能监控表达式和传递事件并且可以从父作用域继承属性。
            • 每一个AngularJS应用都有一个绝对的根作用域。但也可能有多个子作用域。 一个应用可以有多个作用域，因为有一些指令会生成新的子作用域，当新作用域被创建的时候，他们会被当成子作用域添加到父作用域下，这使得作用域会变成一个和相应DOM结构一个的树状结构。
            • 控制器上的属性：
            • 现在我们就用ng-controller指令来创建一个简单的控制器定义，如下所示：
            • <div ng-app=“” ng-controller=“MyController”>
            • 请输入一个名字：<input type=“text” ng-model=“person.name”>
            • Hello <span ng-bind=“person.name”></span>
            • </div>
            • <script>
            • function MyController($scope) {
            • $scope.person = {
            • name: “yuanyingke”
            • };
            • }
            • </script>
            • 如上所述，我们通过ng-controller指令创建了一个JavaScript对象 —— MyController并带有name属性，那参数$scope是什么呢，代表什么意思呢。
            • 现在我们就来解答MyController对象参数 —— $scope。
            • $scope就是把一个DOM元素连结到控制器上的对象，它提供一个绑定到DOM元素(以及其子元素)上的执行上下文。它也是一个JavaScript对象，指向应用程序作用域内的所有HTML元素和执行上下文。
            • 要明确创建一个$scope对象，我们就要给DOM元素安上一个controller对象，使用的是ng-controller 指令属性。
            • 所有$scope都遵循原型继承，这意味着它们都能访问父$scope们,对任何属性和方法，如果AngularJS在当前$scope上找不到，就会到父$scope上去找，如果在父$scope上也没找到，就会继续向上回溯，一直到$rootScope上，这个$rootScope是最顶级的$scope，它对应着含有 ng-app指令属性的那个DOM元素，也就是说根作用域关联的DOM就是ng-app指令定义的地方。
            • 也就是说，拥有了$scope，我们就可以操作作用域内任何我们想要获取的对象数据。
            • 控制器上的方法：
            • 控制器不仅声明属性也可以声明方法，如下所示：
            • <div ng-app=“” ng-controller=“MyController”>
            • 名称:
            • <input type=“text” ng-model=“username”>
            • <button ng-click=“sayHello()”>打招呼</button>
            • <hr>
            • {{greeting}}
            • </div>
            • <script>
            • function MyController($scope) {
            • $scope.username = ‘yuanyingke’;
            • $scope.sayHello = function() {
            • $scope.greeting= ‘Hello ‘ + $scope.username + ‘!’;
            • };
            • }
            • </script>
            • 注意事项：
            • 不要试图去复用controller,一个控制器一般只负责一小块视图
            • 不要在controller中操作DOM，这不是控制器的职责，是指令的职责。
            • 不要在controller里做数据格式化，ng有很好用的过滤器实现此功能。
            • 不要在controller里面做数据过滤操作，ng有$filter服务
            • 一般来说，controller是不会互相调用的，控制器这间的交互是通过事件进行的。
        • 创建指令
          • <head>
          • <meta charset=“UTF-8”>
          • <title></title>
          • <script src=“angular.min.js” type=“text/javascript” charset=“utf-8”></script>
          • <style type=“text/css”>
          • .directive{
          • color:red;
          • }
          • </style>
          • </head>
          • <body ng-app=“myApp”>
          • <!—<runoob-directive></runoob-directive>—>
          • </body>
          • <script type=“text/javascript”>
          • var app = angular.module(“myApp”, []);
          • app.directive(“runoobDirective”, function() {
          • return {
          • template : “<h1><a href=‘###’ class=‘directive’>我是a</a></h1>”
          • };
          • });
          • </script>
          • 指令定义对象的常用属性如下：
          • template : string
          • 使用template指定的HTML标记替换指令内容（或指令自身）
          • restrict : string
          • 用来限定指令在HTML模板中出现的位置。
          • replace : true|false
          • 使用这个属性指明template的替换方式。
          • <head>
                <meta charset=“UTF-8”>
                <title>Title</title>
                <script type=“text/javascript” src=“angular.min.js”></script>
            </head>
            <body ng-controller=“testController”>
                <test-directive></test-directive>
            </body>
            <script type=“text/javascript”>
                //
                var app = angular.module(“myApp”,[]);
                app.controller(“testController”, function ($scope) {

            $scope.title = “myApplication”;
                });
                app.directive(“testDirective”,function(){
                    return {
                        replace:true,//替换
                        restrict:”EA”,//限制指令的出现位置
                        /*
                        * E - 指令可以作为HTML元素使用
                         A - 指令可以作为HTML属性使用
                         C - 指令可以作为CSS类使用
                         M - 指令可以在HTML注释中使用
                        * */
                        template:”<div>name:{{name}}</div>”
                    }
                });

            </script>

      • mvvm-延伸阅读
        • 简介
          • 针对客户端应用开发AngularJS吸收了传统的MVC基本原则。MVC(Model-View-Controll)设计模式针对不同的人可能意味不同的东西 ,AngularJS并不执行传统意义上的MVC，更接近于MVVM。
          • MVVM模式是Model-View-ViewMode模式的简称。由视图(View)、视图模型(ViewModel)、模型(Model)三部分组成，通过这三部分实现UI逻辑、呈现逻辑和状态控制、数据与业务逻辑的分离。
          • Model将和ViewModel互动(通过$scope对象)，将监听Model的变化。这些可以通过View来发送和渲染，由HTML来展示你的 代码。
          • Model与MVC模式一样，Model用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。它具有对数据直接访问的权利，例如对数据库的访问，Model不依赖于View和ViewModel，也就是说，模型不关心会被如何显示或是如何被操作，模型也不能包含任何用户使用的与界面相关的逻辑。
          • ViewModel是一个用来提供特别数据和方法从而维护指定view的对象,。ViewModel是$scope的对象，只存在于AnguarJS的应用中。$scope只是一个简单的js对象，这个对象使用简单的API来侦测和广播状态变化。
          • Controller负责设置初始状态和参数化$scope方法用以控制行为。需要指出的controller并不保存状态也不和远程服务互动。
          • View是AngularJS解析后渲染和绑定后生成的HTML。这个部分帮助你创建web应用的架构。$scope拥有一个针对数据的参考，controller定义行为，view处理布局和互动。
        • 模块化
          • 模块之间如何依赖，依赖注入
          • angular.module()创建、获取、注册angular中的模块
          • // 传递参数不止一个,代表新建模块;空数组代表该模块不依赖其他模块
          • var createModule = angular.module(“myModule”, []);
          • // 只有一个参数(模块名),代表获取模块
          • // 如果模块不存在,angular框架会抛异常
          • var getModule = angular.module(“myModule”);
          • 该函数既可以创建新的模块，也可以获取已有模块，是创建还是获取，通过参数的个数来区分。
          • angular.module(name, [requires], [configFn]);
          • - name：字符串类型，代表模块的名称；
          • - requires：字符串的数组，代表该模块依赖的其他模块列表，如果不依赖其他模块，用空数组即可；
          • - configFn：用来对该模块进行一些配置。
          • 现在我们知道如何创建、获取模块了，那么模块究竟是什么呢？
            官方的Developer Guide上只有一句话：You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc.
            模块是一些功能的集合，如控制器、服务、过滤器、指令等子元素组成的整体。
      • 服务
        • AngularJS提供了一些功能的封装，但是当你试图通过全局对象angular去 访问这些功能时，却发现与以往遇到的库大不相同。
        • $http
        • 比如，在jQuery中，我们知道它的API通过一个全局对象：$ 暴露出来，当你需要 进行ajax调用时，使用$.ajax()就可以了。这样的API很符合思维的预期。
        • AngularJS也暴露了一个全局对象：angular，也对ajax调用进行封装提供了一个 $http对象，但是，但是，当你试图沿用旧经验访问angular.$http时，发现不是 那么回事！在angular中是以一个参数的形式传递到控制器中，如果要使用它，需要在 controller 中定义。
        • $http服务
          • <head>
          • <meta charset=“UTF-8”>
          • <title></title>
          • <script src=“angular.min.js” type=“text/javascript” charset=“utf-8”></script>
          • <script src=“http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js”></script>
          • </head>
          • <body ng-app=“myApp”>
          • <div ng-controller=“myCtrl”>
          • <!—{{content}}—>
          • <span ng-bind-html=“content”></span>
          • </div>
          • <script type="text/javascript">
          • var app = angular.module("myApp",['ngSanitize']);
          • app.controller("myCtrl",function ($scope,$http){
          • $http.get("content.html").success(function (res){
          • $scope.content = res;
          • });
          • });
          • </script>
          • angular-sanitize.js
        • <body ng-app=“myApp”>
        • <div ng-controller=“myCtrl”>
        • {{url}}
        • </div>
        • <script type=“text/javascript”>
        • var app = angular.module(“myApp”,[]);
        • app.controller(“myCtrl”,function ($scope,$location){
        • console.log($location);
        • // $scope.url = $location.absUrl();
        • });
        • </script>
        • location
        • 定时器
          • var app = angular.module(“myApp”,[]);
          • app.controller(“myCtrl”,function ($scope,$timeout){
          • $timeout(function (){
          • alert(‘a’);
          • },2000);
          • });
          • var app = angular.module(“myApp”,[]);
          • app.controller(“myCtrl”,function ($scope,$interval){
          • //循环定时器
          • $interval(function (){
          • alert(‘a’);
          • },2000);
          • });
        • 实例
      • 过滤器
        • 简介
          • 过滤器可以使用一个管道字符（|）添加到表达式和指令中。
          • AngularJS 过滤器
          • AngularJS 过滤器可用于转换数据：
          • 过滤器
          • 描述
          • currency
          • 格式化数字为货币格式。
          • filter
          • 从数组项中选择一个子集。
          • lowercase
          • 格式化字符串为小写。
          • orderBy
          • 根据某个表达式排列数组。
          • uppercase
          • 格式化字符串为大写。
        • html
          • <body ng-app=“myApp”>
          • <div ng-controller=“myCtrl”>
          • <span>相乘</span>
          • <input type=“text” ng-model=“num1” />
          • <input type=“text” ng-model=“num2” /><br />
          • <!—currency:”￥” 中文—>
          • 结果为：{{myFn() | currency}}
          • </div>
          • </body>
        • js
          • var app = angular.module(“myApp”,[]);
          • app.controller(“myCtrl”,function ($scope){
          • $scope.num1=5;
          • $scope.num2=10;
          • $scope.myFn = function (){
          • return $scope.num1*$scope.num2;
          • }
          • });
        • 字体大小转换
          • <body ng-app=“”>
          • <div>
          • <!—{{‘HelloWorld’ | lowercase}}—>
          • {{‘HelloWorld’ | uppercase}}
          • </div>
        • 筛选
          • <body ng-app=“” ng-init=“arr=[‘tangcaiye’,’zhangsan’,’lisi’]”>
          • 搜索：<input type=“text” ng-model=“name” />
          • <ul>
          • <li ng-repeat=“x in arr | filter:name”>{{x}}</li>
          • </ul>
        • 筛选加排序
          • <body ng-app=“myApp”>
          • <div ng-controller=“myCtrl”>
          • <ul>
          • <li ng-repeat=“x in friends |filter:’a’ | orderBy:order:true”>{{x}}</li>
          • </ul>
          • </div>
          • <script type=“text/javascript”>
          • var app = angular.module(“myApp”,[]);
          • app.controller(“myCtrl”,function ($scope){
          • $scope.friends = [{name:’John’, phone:’555-1212’, age:21},
          • {name:’Mary’, phone:’555-9876’, age:19},
          • {name:’Mike’, phone:’555-4321’, age:10},
          • {name:’Adam’, phone:’555-5678’, age:35},
          • {name:’Julie’, phone:’555-8765’, age:29}];
          • $scope.order=“phone”;
          • });
          • </script>

angular(二)的更多相关文章

  1. Angular(二）

    <!DOCTYPE html> <html lang="en" ng-app='myApp'> <head> <meta charset= ...

  2. Angular(二) - 组件Component

    1. 组件Component示例 2. Component常用的几个选项 3. Component全部的选项 3.1 继承自@Directive装饰器的选项 3.2 @Component自己特有的选项 ...

  3. 【Angular专题】——（1）Angular，孤傲的变革者

    目录 一. 漫谈Angular 二. 如果你还在使用Angularjs 三. 我计划这样学习Angular技术栈 一. 漫谈Angular Angular,来自Google的前端SPA框架,与Reac ...

  4. angular编译机制

    转载https://segmentfault.com/a/1190000011562077 Angular编译机制 前言 http://www.cnblogs.com/ztwBlog/p/620975 ...

  5. Angular 7开发环境配置

    目录 前言 一.搭建项目  1.安装Angular CLI  2.创建项目  3.集成Element Angular 二.设置路由  1.创建路由模块  2.导入.导出RouterModule类  3 ...

  6. AngularJS的相关应用

    一.[AngularJS常用指令]        1.ng-app:声明Angular所管辖的区域.一般写在body或html上,原则上一个页面只有一个:           <body ng- ...

  7. angular服务二

    angular服务 $http 实现客户端与服务器端异步请求 get方式 test.html <!DOCTYPE html> <html lang="en"> ...

  8. angular学习笔记(二十九)-$q服务

    angular中的$q是用来处理异步的(主要当然是http交互啦~). $q采用的是promise式的异步编程.什么是promise异步编程呢? 异步编程最重要的核心就是回调,因为有回调函数,所以才构 ...

  9. Angular组件——组件生命周期(二)

    一.view钩子 view钩子有2个,ngAfterViewInit和ngAfterViewChecked钩子. 1.实现ngAfterViewInit和ngAfterViewChecked钩子时注意 ...

随机推荐

  1. angular初体验

    所有需要ng管理的代码必须被包裹在一个有ng-app指令的元素中ng-app是ng的入口,表示当前元素的所有指令都会被angular管理(对每一个指令进行分析和操作) 利用angular实现双向绑定: ...

  2. Ubuntu 15.04 开启远程桌面

    1.安装Xrdp Windows远程桌面使用的是RDP协议,所以ubuntu上就要先安装Xrdp,终端命令行输入安装: sudo apt-get install xrdp vnc4server xba ...

  3. hadoop三大组件的简单图解

    如有不对,欢迎大家指正

  4. 转：Linux下which、whereis、locate、find 命令的区别

    我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索.这些是从网上找到的资料,因为有时很长时间不会用到,当要用的时候经常弄混了,所以放到这里方便使用. which    ...

  5. tp 批量转码

    读取王正东成功,然后把乱码一条一条的改回来... 专门针对mssql数据库的!!!

  6. Python之修改文件MD5值

    import os def fileAppend(filename): myfile = open(filename,'a') myfile.write("####&&&am ...

  7. Swing与AWT在事件模型处理上是一致的

    Swing与AWT在事件模型处理上是一致的. Jframe实际上是一堆窗体的叠加. Swing比AWT更加复杂且灵活. 在JDK1.4中,给JFRAME添加Button不可用jf.add(b).而是使 ...

  8. 要立刷金组flag了T_T

    刷了那么多银组,发现自己好多不会啊... 果然太弱 在这感谢hzwer神犇的blog.. 大部分题解都从黄学长这里来orz. orz.... 果然我太水

  9. Swift AVFoundation 二维码扫描和生成

    项目最终不须要支持iOS6了(泪崩),在二维码扫描这一块,可以全然的放弃ZXing库,改用系统的AVFoundation了,拿swift写了个Demo,效果例如以下: github地址:点这里 有关A ...

  10. wifi的web 认证。

    wifi的web 认证.wifidog+authpuppy+php 或者Wiwiz Auth API