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 定义了控制器。

原文地址:https://www.cnblogs.com/old-street-hehe/p/angular-xj.html