zoukankan      html  css  js  c++  java
  • Angular.js--教程--1

    Angular.js:

        Angular.js通过新的属性和表达式扩展了HTML。

        Angular.js可以构建一个单一页面应用程序。

        Angular.js是比较新的技术,版本1.0是在2012年发布的。

        Angular.js是由Google的员工Misko Hevery从2009年着手开发的。

    一、Angular.js简介:

    它是一个JavaScript框架,它通过《script》标签添加到HTML页面。它以一个JavaScript文件形式发布的,通过script标签添加到页面上。

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

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

    它通过指令(ng-directives)扩展了HTML,且通过表达式绑定数据到HTML。

    ng-app指令定义一个AngularJs应用程序。

    ng-model指令把元素值(比如输入域的值)绑定到应用程序。

    ng-bind指令吧应用程序绑定到HTML视图。

    <!DOCTYPE html>

      <html>

      <head>

      <meta charset="utf-8">

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

      </head>

      <body>

        <div ng-app="">

        <p>名字 : <input type="text" ng-model="name"></p>

        <h1>Hello {{name}}</h1>

        </div>

      </body>

    </html>

    当你在输入框中输入内容时,在h1标签里就会显示Hello{{name}},name指的是你输入框的内容。

    <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
          </head>
          <body>

             <div ng-app="" ng-init="firstName='John'">

        <p>姓名为 <span ng-bind="firstName"></span></p>

         </div>

    </body>
    </html>

    ng-init 指令初始化 AngularJS 应用程序变量。

    HTML5 允许扩展的(自制的)属性,以 data- 开头。
    AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 有效。

    <body>

    <div ng-app="" ng-init="firstName='John'">

    <p>姓名为 <span ng-bind="firstName"></span></p>

    </div>

    </body>

    二、Angular.js表达式

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

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body>

    <div ng-app="">
    <p>我的第一个表达式: {{ 5 + 5 }}</p>
    </div>

    </body>
    </html>

    运行出来的是10.

    三、Angular.js应用

    AngularJS 模块(Module) 定义了 AngularJS 应用。

    AngularJS 控制器(Controller) 用于控制 AngularJS 应用。

    ng-app指令定义了应用, ng-controller 定义了控制器。

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

    名: <input type="text" ng-model="firstName"><br>

    姓: <input type="text" ng-model="lastName"><br>

    姓名: {{firstName + " " + lastName}} </div>

    <script>

    var app = angular.module('myApp', []);-----》Angular.js模块

    app.controller('myCtrl', function($scope) {-------》Angular.js控制器

       $scope.firstName= "John";

       $scope.lastName= "Doe";

    });

    </script>

    这些实例其实很简单,你可以在你的编译器里打一遍你就很容易懂了。

  • 相关阅读:
    python中a = a+b与a += b的不同
    python中的全局变量global
    python中星号(*)和双星号(**)的用法
    python循环语句
    python逻辑运算符
    python内置函数 print()
    python 解析迅雷下载链接
    python 正则表达式
    python 读写文件
    python selenium操作cookie
  • 原文地址:https://www.cnblogs.com/liangxiaoli/p/7716789.html
Copyright © 2011-2022 走看看