Angular随笔第一课

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Angular随笔第一课相关的知识,希望对你有一定的参考价值。

一、调用angular

  1. 加载angular.js库(可以从google的cdn中加载类库,https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js,也可以下载到本地,楼主我就是下载到本地来引入代码的)
  2. 使用ng-app指令告诉angular应该管理dom中的哪一部分。

二、使用ng-app申明angular的边界

你可以使用ng-app指令告诉angular应该管理页面的哪一块,如果你正在构建一款纯angular应用,那么你应该把ng-app指令写在<html>标签中。

Eg:<html ng-app></html>

或者可以让angular只管理页面中的一部分

Eg:<html><div ng-app></div></html>

 

现在写一个简单的列子

<!DOCTYPE html>
<html ng-app = ‘myApp‘>
<head>
     <title></title>
     <meta name="name" content="content" charset="utf-8">
     <script src="angular-1.4.2/angular.js" type="text/javascript"></script>
     <script type="text/javascript">
     angular.module(myApp,[]).controller(textController,function($scope){
          $scope.someText = you have started your journey;
     })
     </script>
</head>
<body ng-controller="textController">
<p>{{someText}}</p>
</body>
</html>

在页面中会显示 you have started your journey

 

三、显示文本

在angular中,数据绑定有2种实现方法,一种是前面写的{{}}花括号的形式,另外一中就是使用ng-bind属性的指令形式。<p ng-bind=”someText”></p>

在书写中,我们会推荐使用第二种数据绑定的方法,原因如下:

  1. 在使用花括号的时候,第一个加载的页面,也就是应用中的index.html,其未被渲染的模板可能被用户看到。而使用第二种方法的视图就不会遇到这个问题了。(原因是:浏览器需要首先加载html页面,渲染他,然后angular才有机会把他解释成你期望看到的页面)

四、表单输入

我们可以使用ng-model属性把元素绑定到你的模型属性上

<form ng-controller="some">
     <input type="checkbox" ng-model="youcheck">
</form>

 

  1. 当用户选中了复选框之后,some中的$socpe.youcheck=true,而反选复选框会让$socpe.youcheck=false;
  2. 如果你在some中把$socpe.youcheck的值设置为true,那么UI中的复选框就会变成选中的状态,反之就不会选中。

举一个列子

<form ng-controller="startUp">
     Strat: <input type="text" ng-change="number()" ng-model="startnum">
     add : {{needed}}
</form>
 <script type="text/javascript">
     angular.module(‘myApp‘,[]).controller(‘startUp‘,function($scope){
         $scope.startnum = 0;
         $scope.number = function(){
               $scope.needed = $scope.startnum * 10;
         }
     })
     </script>

 当我们在文本框输入值的时候,我们会看到add的值是随时改变的。但是这样的话,就会出现一个问题,即如果还有其他输入框也绑定到模型中的这个属性上,会怎样呢?

我们可以引入$scope中的$watch()的函数----可以调用$watch()函数来监视一个表达式,当这个表达式发生改变时就会调用一个回调函数。

下面我们用这一技术重写

<script type="text/javascript">
     angular.module(‘myApp‘,[]).controller(‘startUp‘,function($scope){
         $scope.startnum = 0;
        number = function(){
               $scope.needed = $scope.startnum * 10;
         }
        $scope.$watch(‘startnum‘,number);
     })
     </script>

 在某些情况下,你不想一有变化就立刻做出反应,直到用户告诉你他已经准备好了,列如发出一条确认信息之后(如下所示,是在form表单上面使用的列子,当表单提交的时候可以执行这个函数)

<form ng-controller="form" ng-submit="request()">
     start:<input ng-change="computer()" ng-model="startform">
     add: {{addform}}
     <button>click me</button>
</form>

<script type="text/javascript">
    angular.module(‘myApp‘,[]).controller(‘form‘, function ($scope) {
         $scope.computer = function () {
              $scope.addform = $scope.startform * 10;
         }
         $scope.request = function () {
              window.alert(‘sorry‘);
         }
    })
     </script>

 同时,在提交表单的时候,ng-submit还会自动阻止浏览器执行默认的post操作

onclick ----ng-click      ondbclick-----ng-dbclick

 

以上是关于Angular随笔第一课的主要内容,如果未能解决你的问题,请参考以下文章

吴恩达第一课第三周随笔

课堂随笔"Java"的第一课JDK的下载,安装和配置

第一课第一周大作业-胸部14种疾病分类-代码详解

Angular随笔第二课

APP反编译第一课《如何找到核心代码》

Magento学习第一课——目录结构介绍