Angular随笔第一课-白红宇

Angular随笔第一课

阅读量：4958 次

发布时间：2019-06-12

本文共 1439 字，大约阅读时间需要 4 分钟。

一、调用angular

加载angular.js库（可以从google的cdn中加载类库,https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js，也可以下载到本地，楼主我就是下载到本地来引入代码的）

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

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

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

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

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

现在写一个简单的列子

          
               {
   {someText}}

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

三、显示文本

在angular中，数据绑定有2种实现方法，一种是前面写的{

{}}花括号的形式，另外一中就是使用ng-bind属性的指令形式。<p ng-bind=”someText”></p>

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

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

四、表单输入

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

举一个列子


     
           Strat: 
           add : {
    {needed}}

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

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

下面我们用这一技术重写

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


     
           start:
           add: {
    {addform}}

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

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

转载于:https://www.cnblogs.com/maxiaodan/p/5231168.html

你可能感兴趣的文章