zoukankan      html  css  js  c++  java
  • angularjs 五大关键点

    UI
    内容,样式,交互
    RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一
    1. 防止js加载阻塞页面渲染
    2. 使用程序调用的方式加载js,防出现如下丑陋的场景
    一个程序要想使用一个可复用模块,需要先声明这种依赖关系,再使用查找
    {{username}}绑定表达式
    <span ng-bind=”username”></span>指令
    A:路由:route(路由的定义,路由传参等等)
    AngularJS 路由允许我们通过不同的 URL 访问不同的内容。
    <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
    angular.module('routingDemoApp',['ngRoute'])
    <div ng-view></div>该 div 内的 HTML 内容会根据路由的变化而变化。
    配置 $routeProvider,AngularJS $routeProvider 用来定义路由规则。
    module.config(['$routeProvider', function($routeProvider){
    $routeProvider
    .when('/',{template:'这是首页页面'})
    .when('/computers',{template:'这是电脑分类页面'})
    .when('/printers',{template:'这是打印机页面'})
    .otherwise({redirectTo:'/'});
    }]);
    <a ui-sref="app.index">首页</a>
    <!-- 这里是正常的跳转 -->
    <a ui-sref="app.index({id:yourId})">你的主页</a>
    <!-- 这里是带参数对象的跳转,名称是id,值是yourId -->

    简单的默认ngroute路由页面
    <html>
    <head>
    <meta charset="utf-8">
    <title>AngularJS 路由实例 - 菜鸟教程</title>
    </head>
    <body ng-app='routingDemoApp'>

    <h2>AngularJS 路由应用</h2>
    <ul>
    <li><a href="#/">首页</a></li>
    <li><a href="#/computers">电脑</a></li>
    <li><a href="#/printers">打印机</a></li>
    <li><a href="#/blabla">其他</a></li>
    </ul>

    <div ng-view></div>
    <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>
    <script>
    angular.module('routingDemoApp', ['ngRoute'])
    .config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when('/', { template: '这是首页页面' })
    .when('/computers', { templateUrl: 'index.html', })
    .when('/printers', { template: '这是打印机页面' })
    .otherwise({ redirectTo: '/' });
    }]);
    </script>


    </body>
    </html>
    B指令: directive(指令封装公共控件,解耦,增加工作效率)
    组件型指令:分离view,重要的是内容信息的展示;大概就是应用指令进行模块化,使得界面更加简洁易懂。
    装饰型器指令:为dom添加行为,链接model和view(装饰器和函数差不多,避免每个函数编写大量重复性的代码)
    Restrict:““。E,A,EA(元素,属性声明方式,任意结合)
    http://www.cnblogs.com/CreateMyself/p/5568202.html
    (1)在controller写业务逻辑(我们明白业务逻辑大部分是放在服务中),这里所说的业务逻辑乃是为呈现视图之前而准备的数据或者是与其他指令进行数据交互而暴露这个api。
    (2)在link中主要操作DOM。

    C服务:service
    服务是一个函数或对象
    有个 $location 服务,它可以返回当前页面的 URL 地址。
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
    }); // $location 服务是作为一个参数传递到 controller 中
    $http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求,应用响应服务器传送过来的数据。
    $interval 服务
    每一秒显示信息:可以动态改变时间
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body>

    <div ng-app="myApp" ng-controller="myCtrl">

    <p>现在时间是:</p>

    <h1>{{theTime}}</h1>

    </div>

    <p>$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。</p>

    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
    $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
    });
    </script>

    </body>
    </html>

    $timeout 服务
    AngularJS $timeout 服务对应了 JS window.setTimeout 函数。
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
    $scope.myHeader = "How are you today?";
    }, 2000);
    });
    D过滤器:filter
    过滤器可以使用一个管道字符(|)添加到表达式和指令中。
    currency 格式化数字为货币格式。
    filter 从数组项中选择一个子集。
    lowercase 格式化字符串为小写。
    orderBy 根据某个表达式排列数组。
    uppercase 格式化字符串为大写。
    <div ng-app="myApp" ng-controller="personCtrl">
    <p>姓名为 {{ lastName | uppercase }}</p>
    </div>
    E承诺(异步编程):promise
    理解严格模式: 'use strict'


  • 相关阅读:
    Leetcode36--->Valid Sudoku(判断给定的数独是否有效)
    Leetcode34--->Search for a Range(在排序数组中找出给定值出现的范围)
    Leetcode33--->Search in Rotated Sorted Array(在旋转数组中找出给定的target值的位置)
    Leetcode31--->Next Permutation(数字的下一个排列)
    Leetcode30--->Substring with Concatenation of All Words(主串中找出连接给定所有单词的子串的位置)
    Leetcode207--->课程表(逆拓扑排序)
    Leetcode28--->字符串的匹配(KMP)
    前端组件,框架,以及模板
    wpf开发
    UML统一建模
  • 原文地址:https://www.cnblogs.com/0280-hnn/p/7459079.html
Copyright © 2011-2022 走看看