Angular.js 入门(一)

AngularJS
通过 指令 扩展了
HTML,且通过 表达式 绑定数据到
HTML。

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

     <p>在输入框中尝试输入:</p>
     <p>姓名:<input type="text" ng-model="firstName"></p>
     <p>你输入的为: {{ firstName }}</p>

</div>

<div ng-app="" ng-init="quantity=1;price=5">

<h2>价格计算器</h2>

数量: <input type="number"    ng-model="quantity">
价格: <input type="number" ng-model="price">

<p><b>总价:</b> {{ quantity * price }}</p>

</div>

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <p>使用 ng-repeat 来循环数组</p>
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<p>循环对象:</p>
<ul>
  <li ng-repeat="x    in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>
angular.module('myApp',[]).directive('zl1',[ function(){
  return {
    restrict:'AE',
    template:'thirective',
    link:function($scope,elm,attr,controller){
      console.log("这是link");
    },
    controller:function($scope,$element,$attrs){
      console.log("这是con");
    }
  };
}]).controller('Con1',['$scope',function($scope){
  $scope.name="aliceqqq";
}]);

三. AngularJS模型

第1介绍下怎么着是angular.js?

<div ng-app="" ng-init="quantity=1;cost=5">

<p>总价: {{ quantity * cost }}</p>

</div>


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

<p>姓名: </p>

</div>

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>姓为 {{ person.lastName }}</p>

</div>

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

二. AngularJS指令

近期在求学angular.js,为此方便加深对angular.js前端框架的精通,由此写下那篇angular.js入门

AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page
Applications)变得进一步便于。

AngularJS 表明式把数据绑定到 HTML,那与 ng-bind 指令有异曲同工之妙。

一. AngularJS表达式

  • AngularJS 把应用程序数据绑定到 HTML 成分。
  • AngularJS 能够仿造和重复 HTML 成分。
  • AngularJS 能够隐藏和体现 HTML 成分。
  • AngularJS 能够在 HTML 元素”背后”添加代码。
  • AngularJS 援助输入验证。
<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script>

逐条 angular.js
版本下载: https://github.com/angular/angular.js/releases

AngularJS 是一个 JavaScript 框架。它可经过 <script> 标签添加到
HTML 页面。

AngularJS,AngularJS 将在表明式书写的职位”输出”数据。

好处:

 

相关文章