zoukankan      html  css  js  c++  java
  • 菜鸟教程---angular.js

    <html>
    
    <head>
        <meta charset="utf-8">
        <title>菜鸟教程---angular.js</title>
        <meta name="keyword" content="菜鸟教程---angular.js">
        <meta name="discription" content="菜鸟教程---angular.js">
    </head>
    
    <body>
        <script>
        第一章 Angular简介
        AngularJS通过指令扩展了HTML, 且通过表达式绑定数据到HTMl
        ng - app: 该指令告诉AngularJS, < div > 元素是AngularJS应用程序的 "所有者";
        ng - model: 把输入域的值绑定到应用程序变量name
        ng - bind: 把应用程序变量name绑定到某个段落的innerHTML
        AngularJS:
            1 使得开发现代的单一页面应用程序变的更加容易
        2 把应用程序数据绑定到HTML元素
        3 可以克隆和复制HMTL元素
        4 隐藏显示HTML元素
        5 可以在HTML元素 "背后"
        添加代码
        6 支持输入验证
    
        第二章 表达式
        使用表达式把数据绑定到HTML
        1 表达式写在大括号内: { { expression } }
        2 与ng - bind有一样的作用
    
        第三章 指令
    
        通过被称为指令的新属性开扩张HTML
        通过内置的指令来为应用添加功能
        允许自定义指令
        ng - app: 初始化一个AngularJS应用程序, 定义了应用程序根元素, 网页加载完毕时会自动引导引用程序
        ng - init: 初始化程序数据
        ng - model: 把元素绑定到应用程序
        /*  <div ng-app="" ng-init="firstName = 'John'">
               <input ng-model='firstName'>
          </div>*/
    
        ng - repeat: 重复一个HTML元素
        /*
        <li ng-repeat = 'x in names'>{{name}}</li>
        */
    
        创建自定义指令:
            app.directive("myDirective", function() {
                return template: "<h1>自定义指令</h1>"
            })
    
        第四章 ng - model指令
        用于绑定应用程序数据到HTML控制器(input, select, textarea) 的值
        1 变量绑定
        /* 
        <input ng-model="name">
        $scope.name = "John Doe";
        */
    
        2 双向数据绑定
        /*
        <input ng-mode="name">
        <p>{{name}}</p>
        */
    
        3 用户输入验证
        /*
         <input type="email" name = 'myAddress' ng-model="text">
         <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
        */
    
        4 应用状态
    
        5 css类
    
        第五章 Scope(作用域)
        应用在HTML(视图) 和javascript(控制器) 之间的纽带
        Scope是一个对象, 有可用的方法和属性
    
    
        第六章 控制器
        控制AngularJS应用程序数据
        是常规的Javascript对象
        由标准的javascript对象构造函数创建
    
        1 外部文件的控制器:
            在大型的应用程序中, 通常是把控制器存储在外部文件
    
    
        第七章 过滤器
        使用管道字符( | ) 添加到表达式和指令中
        currency: 格式化数字为货币格式
        filter: 从数组项中选择一个子集
        lowercase: 格式化字符串为小写
        orderBy: 根据某个表达式排列数组
        uppercase 个数字符串为大写
    
    
        第八章 服务
        可以创建服务, 或使用內建服务
        $location.absUrl(); //返回当前页面的URL地址
    
        $http.get("welcome.htm").then(function(response) {
            $scope.myWelcome = response.data;
        }); //服务向服务器发送请求,应用响应拂去其穿送过来的数据
    
        $timeout(function() {
            $scope.myHeader = "How are you today?";
        }, 2000); //计时器
    
        $interval(function() {
            $scope.theTime = new Date().toLocaleTimeString();
        }, 1000); //定时器
    
    
        自定义服务:
            app.filter('myFormat', ['hexify', function(hexify) {
                return function(x) {
                    return hexify.myFunc(x);
                };
            }]);
    
        $scope.hex = hexafy.myFunc(255); //调用
    
        第九章 XMLHttpRequest
        是AngularJS的一个核心服务, 用于读取远程服务器的数据
    
        $http.get(url)
            .success(function(response) {
                $scope.names = response.records;
            });
    
        第十章 Select(选择框)
        可以使用数组或者对象创建一个下拉列表选项
        /*
        <select ng-model="selectedName" ng-options="x for x in names"></select>
        <option ng-repeat="x in names">{{x}}</option>
        */
    
        第十一章 table(表格)
    
        /*<tr ng-repeat="x in names">
            <td>{{ x.Name }}</td>
            <td>{{ x.Country }}</td>
        </tr>*/
    
        第十二章 SQL
    
        第十三章 HTML DOM
        为HTML元素的属性提供了绑定应用数据的指令
        /*
        <div ng-app="" ng-init="mySwitch=true">
        <p><button ng-disabled="mySwitch">点我!</button></p>
        <p><input type="checkbox" ng-model="mySwitch">按钮</p>
        </div>*/
    
        第十四章 事件
        /*
         <div ng-app="" ng-controller="myCtrl">
         <button ng-click="count = count + 1">点我!</button>
         <p>{{ count }}</p>
         </div>
        */
    
        第十五章 模块
        模块定义了一个应用程序
        模块是应用程序中不同部分的容器
        模块是应用控制器的容器
        控制器通常属于一个模块
        /*
     <div ng-app="myApp">...</div>
     <script>
     var app = angular.module("myApp", []); 
     < /script>
       */
    
        第十六章 表单
    
        第十七章 输入验证
        /*
          <form  ng-app="myApp"  ng-controller="validateCtrl"
            name="myForm" novalidate>
    
            <p>用户名:<br>
              <input type="text" name="user" ng-model="user" required>
              <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
              <span ng-show="myForm.user.$error.required">用户名是必须的。</span>
              </span>
            </p>
    
            <p>邮箱:<br>
              <input type="email" name="email" ng-model="email" required>
              <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
              <span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
              <span ng-show="myForm.email.$error.email">非法的邮箱。</span>
              </span>
            </p>
    
            <p>
              <input type="submit"
              ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
              myForm.email.$dirty && myForm.email.$invalid">
            </p>
            </form>
    
         */
    
        第十八章API(应用程序接口)
        angular.lowercase();
        .
        .
        .
        .
        第十九章 boostrap
    
    
        第二十章 包含
        /*
        <div class="container">
          <div ng-include="'myUsers_List.htm'"></div>
          <div ng-include="'myUsers_Form.htm'"></div>
        </div>
         */
        第二十一章 动画
        /*
          <h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>
          <div ng-hide="myCheck"></div>
          var app = angular.module('myApp', ['ngAnimate']);
         */
        ngAnimate可以添加或移出class
        ngAnimate模型并不能使用HTML元素产生动画, 但是ngAnimate会监听事件, 类型隐藏的显示HTML元素
        如果事件发生ngAnimate就会使用预定于的clas来设置HTMLu元素的动画
        添加 / 移出class的指令
        /*
         ng-show
         ng-hide
         ng-class
         ng-view
         ng-include
         ng-repeat
         ng-if
         ng-switch
         */
    
        第二十二章 依赖注入
        是一种软件设计模式, 在这模式下, 一个或多个的依赖被注入到一个独立的对象中,
        然后成为客户状态的一部分
    
        1 value: 一个简单的javascript对象, 用于向控制器传递值
    
        app.value("myData", "4343242");
        app.controller("con", function($scope, myDate))
    
    
        2 factory: 是一个函数用于返回值.在service和controller需要时创建
    
        app.factory('mathService', function() {
            var factory = {};
            factory.multiply = function(a, b) {
                return a * b;
            }
            return factory;
        })
        app.service('CalcService', function(MathService) {
            this.square = function(a) {
                return MathService.multiply(a, a);
            }
        });
    
    
        3 provider: 提供一个factory方法get(), 它用于返回value / service / factory
    
    
        4 constant 用来在配置阶段传递数值, 注意这个敞亮在配置阶段是不可用的
    
    
        第二十三章 路由
        路由允许我们通过不同的url访问不同的内容
        可以实现多视图单页面web应用
        /*
            angular.module('routingDemoApp',['ngRoute'])
           .config(['$routeProvider', function($routeProvider){
               $routeProvider
               .when('/',{template:'这是首页页面'})
               .when('/computers',{template:'这是电脑分类页面'})
               .when('/printers',{template:'这是打印机页面'})
               .otherwise({redirectTo:'/'});
           }]);
        */
        </script>
    </body>
    
    </html>
    

      

  • 相关阅读:
    HDU 1813 Escape from Tetris
    BZOJ 2276 Temperature
    BZOJ 4499 线性函数
    BZOJ 3131 淘金
    HDU 5738 Eureka
    POJ 2409 Let it Bead
    POJ 1286 Necklace of Beads
    POJ 1696 Space Ant
    Fox And Jumping
    Recover the String
  • 原文地址:https://www.cnblogs.com/SunlikeLWL/p/8706778.html
Copyright © 2011-2022 走看看