zoukankan      html  css  js  c++  java
  • AngularJs-简介

    AngularJs:是一个javascript框架/库-----可以通过<script>标签引入到HTML 页面中

    eg:<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

    AngularJs:是HTML的扩展,通过ng-directives(指令)扩展了HTML------可以通过表达式绑定数据到页面中(HTML).

    AngularJs:可以开发单一页面应用程序.

    我们建议把脚本放在 <body> 元素的底部。这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。

    各个angular.js版本下载:https://github.com/angular/angular.js/releases;

    AngularJs 指令:AngularJs指令是以ng作为前缀的HTML属性。

    ng-init:初始化AngularJs应用程序变量;

        <div ng-app = "angu" ng-init="firstName = 'hehe'" ng-controller="myCtro">
            <span>名字:{{firstName}}</span>
        </div>
        <script>
            var app = angular.module("angu",[]);
            app.controller("myCtro",function($scope){
    
            })
        </script>

    ng-app:定义了应用---告诉:ng-app所在的这个<div>元素就是AngularJs应用程序的“所有者”;

    <div ng-app = "angu" ng-init="firstName = 'hehe'" ng-controller="myCtro">
    //AngularJS 模块定义应用:
    <script>
      //AngularJS 模块
      var app = angular.module("angu",[]);
    </script>

    ng-controller:定义控制器---控制AngularJs应用;

    <div ng-app = "angu" ng-init="firstName = 'hehe'" ng-controller="myCtro">
    //AngularJS 控制器控制应用:
    <script>
      //AngularJS 模块
      var app = angular.module("angu",[]);
      //AngularJS 控制器
      app.controller("myCtro",function($scope){
      })
    </script>

    ng-model:把输入域的值绑定到应用程序的变量name(name这里只是举例).

    ng-bind:把应用程序的变量name绑定到某个段落的innerHTML.

        <div ng-app = "angu" ng-init="firstName = 'hehe'" ng-controller="myCtro">
            <span>名字:{{firstName}}</span>
            <input type="text" ng-model = "name">
            <span ng-bind = "name"></span>
        </div>
        <script>
            var app = angular.module("angu",[]);
            app.controller("myCtro",function($scope){
    
            })
        </script>

    AngularJs 表达式:AngularJs表达式写在双大括号内:{{expression}}

    AngularJs表达式---把应用程序中的数据绑定到HTML,与ng-bind有异曲同工之妙.

    但是,angularjs表达式会把数据输出到表达式书写的地方,而ng-bind指令则会把数据输出到所在标签的innerHTML中.

    AngularJs 表达式--可以包含文字、变量、运算符--eg:{{firstName +" --"+ lastName}}----与javascript中的表达式类似.

        <div ng-app = "angu" ng-controller="myCtro">
            <input type="text" ng-model = "firstName">
            <input type="text" ng-model = "lastName">
            <span ng-bind = "name"></span>
            <p>表达式:{{firstName + "5" + lastName}}</p>
        </div>
        <script>
            var app = angular.module("angu",[]);
            app.controller("myCtro",function($scope){
    
            })
        </script>

    AngularJs 应用:

    AngularJs 模块(Module)---定义了AngularJs应用;

    AngularJs 控制器 (Controller) ---用来控制AngularJs应用

    AngularJs 视图(view)中:ng-app指令定义了应用, ng-controller 定义了控制器。

  • 相关阅读:
    Codeforces 877 C. Slava and tanks
    Codeforces 877 D. Olya and Energy Drinks
    2017 10.25 NOIP模拟赛
    2017 国庆湖南 Day1
    UVA 12113 Overlapping Squares
    学大伟业 国庆Day2
    51nod 1629 B君的圆锥
    51nod 1381 硬币游戏
    [JSOI2010]满汉全席
    学大伟业 2017 国庆 Day1
  • 原文地址:https://www.cnblogs.com/old-street-hehe/p/angular-xj.html
Copyright © 2011-2022 走看看