• angularJs基础


      AngularJs是为了克服Html在构建应用上的不足而设计的。Html是一门很好的为静态文件展示设计的声明式语言,但是要构建web应用的话就显得乏力了。所以我做了一些工作来让浏览器做我瞎向要的事。

    很久没有写过东西了,感觉写东西都不知道从哪里开始了,还是先写点技术性的吧,angularJs--我喜欢把它叫做“俺哥啦Js”

    1.简单介绍使用ng-app

    决定了angularJs的作用域范围,你可以如下使用

      代码如下:

      <html ng-app>

      ....

      </html>

    来让angularjs渲染整个页面,你也可以使用

      代码如下:

      <div ng-app="myapp">

      ...

      </div>

    来渲染其中的一部分。

    2.ng-model

      ng-model,当你的数据模型被改变的时候,譬如ng-model="test",其中这个test的数值被改变的时候,{{test}}的值也将跟随改变,也就是连接到ng-model中的test也跟随改变,如下

      代码如下:

      <!doctype html>

      <html>

        <head>

          <script src="angular.min.js" ></script>

          <title>learing argularJs</title>

        </head>

        <body ng-app>

        <input ng-model='test'>{{test}}

        </body>

      </html>

    3.angular.module

    这个主要做模板的注册,创建和索引,譬如我们ng-app想把这个注册成为一个服务就要用,当我们引用索引一个模块的时候也要使用

      代码如下:

      angular.module(name,[requires],[configFn]);

      #name 类型string创建的名称,自己定义

      #require 简单理解就是你需要包含的使用木块,譬如ngRoute路由模块

      #configFn 可以选配的功能模块,功能和module.config类似

    4.controller

    controlller英文是控制器,是angular.Module的方法controller(name,constructor);其中那么是controller的名字,constructor是控制器构造函数,我们利用一段代码来来说明

      代码如下:

      <!doctype html>

      <html>

        <head>

          <script src="angular.min.js"><script>

          <script type="text/javascript">

          var app=angular.module("myapp",[]);

          app.controller("mytest",function($scope){

            $scope.test="你好,张强"

    });

          </script>

          <title>learning angularjs</title>

        </head>

        <body ng-app="myapp" ng-controller="mytest">

          <input ng-model='test'>{{test}}

        </body>

       </html>

    5.value

      value也是angular.model中的方法value(name,object);其中那么是service的名称,object是服务器实例对象,这个时候我们可以把上面的代码修改成这样:

      代码如下:

    <!doctype html>

    <html>

    <head>

    <script src="angular.min.js" type="text/javascript"></script>

    <script type="text/javascript">

    var app = angular.module('myapp',[])

    .value('testvalue','word');

    app.controller('mytest',function($scope,testvalue){

    $scope.test="hello "+ testvalue;

    });

    </script>

    <title>learing argularjs--widuu</title>

    </head>

    <body ng-app='myapp' ng-controller='mytest' >

    <input ng-model='test'>{{test}}

    </body>

    </html>

    5.factory

    factory也是angular.Module中的方法factory(name, providerFunction);;其中name是service的名称,providerFunction是函数用于创建新的服务器对象,这个时候我们就可以把上边的代码修改正成这样

    <!doctype html>

    <html>

    <head>

    <script src="angular.min.js" type="text/javascript"></script>

    <script type="text/javascript">

    var app = angular.module('myapp',[])

    .value('testvalue','widuu')

    .factory('testfactory',function(testvalue){

    return{

    lable:function(){

    return "this can output : hello "+ testvalue;

    }

    }

    });

    app.controller('mytest',function($scope,testvalue,testfactory){

    $scope.test = "hello "+ testvalue;

    $scope.output = testfactory.lable();

    });

    </script>

    <title>learing argularjs--widuu</title>

    </head>

    <body ng-app='myapp' ng-controller='mytest' >

    <input ng-model='test'>{{test}}

    {{output}}

    </body>

    </html>

    6.provider

    provider也是angular.Module中的方法provider(name, providerType);其中name是service的名称,providerFunction是函数用于创建新的服务器对象,这个跟factory差不多,我们现在用provider重写

    <!doctype html>

    <html>

    <head>

    <script src="angular.min.js" type="text/javascript"></script>

    <script type="text/javascript">

    var app = angular.module('myapp',[])

    .value('testvalue','widuu')

    .provider('testprovider',

    function(){

    this.lable = "this will output : hello widuu";

    this.$get = function () {

    return this;

    }

    }

    );

    app.controller('mytest',function($scope,testvalue,testprovider){

    $scope.test = "hello "+ testvalue;

    $scope.output = testprovider.lable;

    });

    </script>

    <title>learing argularjs--widuu</title>

    </head>

    <body ng-app='myapp' ng-controller='mytest' >

    <input ng-model='test'>{{test}}

    {{output}}

    </body>

    </html>

    7.service

    service也是angular.Module中的方法service(name, constructor);其中name是service的名称,constructor一个将被实例化的构造函数,这个跟factory差不多,我们现在用service重写

    <!doctype html>

    <html>

    <head>

    <script src="angular.min.js" type="text/javascript"></script>

    <script type="text/javascript">

    var app = angular.module('myapp',[])

    .value('testvalue','widuu')

    .service('testservice',

    function(testvalue){

    this.lable = function(){

    return "this will output:hello "+testvalue;

    }

    }

    );

    app.controller('mytest',function($scope,testvalue,testservice){

    $scope.test = "hello "+ testvalue;

    $scope.output = testservice.lable();

    });

    </script>

    <title>learing argularjs--widuu</title>

    </head>

    <body ng-app='myapp' ng-controller='mytest' >

    <input ng-model='test'>{{test}}

    {{output}}

    </body>

    </html>

    8.constant

    constant也是angular.Module中的方法constant(name, object);其中name是常量的名称,而object是常量的值,我们可以这样写的

    <!doctype html>

    <html>

    <head>

    <script src="angular.min.js" type="text/javascript"></script>

    <script type="text/javascript">

    var app = angular.module('myapp',[])

    .value('testvalue','widuu')

    .constant('count',23)

    .service('testservice',

    function(testvalue,count){

    this.lable = function(){

    return "this will output:hello "+testvalue+",age is "+count;

    }

    }

    );

    app.controller('mytest',function($scope,testvalue,testservice){

    $scope.test = "hello "+ testvalue;

    $scope.output = testservice.lable();

    });

    </script>

    <title>learing argularjs--widuu</title>

    </head>

    <body ng-app='myapp' ng-controller='mytest' >

    <input ng-model='test'>{{test}}

    {{output}}

    </body>

    </html>

     今天就先写到这里。拜拜

  • 相关阅读:
    Interesting Finds: 2008.03.19
    Interesting Finds: 2008.03.11
    Interesting Finds: 2008.03.27
    Interesting Finds: 2008.03.21
    每日日报
    每日日报
    每日日报
    每日日报
    idea怎么创建properties文件
    移动端rem.js
  • 原文地址:https://www.cnblogs.com/zhangqiang329/p/4862634.html
Copyright © 2020-2023  润新知