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

  • 相关阅读:
    macOS10.9+xcode6编译ffmpeg2.4.2 for ios
    [think in java]第12章 通过异常处理错误
    机房合作感受
    LeetCode 210. Course Schedule II(拓扑排序-求有向图中是否存在环)
    Java继承
    jQuery学习笔记之DOM操作、事件绑定(2)
    intellij IDEA常见操作
    log4j.properties配置详解
    jQuery学习笔记之概念(1)
    VC常用代码之创建进程
  • 原文地址:https://www.cnblogs.com/old-street-hehe/p/angular-xj.html
Copyright © 2011-2022 走看看