[angularjs] angularjs系列笔记(一)简介详解编程语言

Angularjs通过新的属性和表达式扩展了html

Andularjs 可以构建一个单一页面的应用程序(SPAS SinglePageApplications

Angularjs通过指令扩展了html,通过表达式绑定数据到html

 

ng-app指令定义Angularjs的应用程序

ng-model指令绑定元素值到应用程序

ng-bind指令把应用程序数据绑定到html视图

 

    <div ng-app=""> 
      <input type="text" ng-model="name"> 
      <p ng-bind="name"></p> 
    </div>

 

AngularJs的指令是以ng作为前缀的html属性

ng-init指令初始化AngularJs应用程序的变量

 

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

AngularJs的表达式把数据绑定到html,这与ng-bind指令有异曲同工之妙

AngularJs将在表达式输出的定义的位置输出数据

 

    <div ng-app="" ng-init="myName='taoshihan'"> 
      <input type="text" ng-model="name"> 
      <p ng-bind="name"></p> 
      <p ng-bind="myName"></p> 
      <p>{{5+5}}</p> 
    </div>

 

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

AngularJs控制器(Controller)用于控制AngularJs应用

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

 

  <body> 
    <div ng-app="Home" ng-controller="index"> 
      <p>{{myName}}</p> 
    </div> 
  </body> 
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
  <script type="text/javascript"> 
  //实例化应用对象,参数:模块名,空数组 
  var app=angular.module("Home",[]); 
  //调用应用对象的controller()方法,参数:控制器名,回调函数 
  app.controller("index",function($scope){ 
    $scope.myName="taoshihan"; 
  }) 
  </script>

 

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/12717.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论