angularjs基础知识

js中的函数,判断这个函数是构造函数还是自调用的函数,只需要看this指向。如果this指向的是window,那肯定是自调用,如果this的实例是这个函数,那就是构造函数。
比如angularjs中的MyController都是会自动new一个构造函数的。可以这样证明:
function MyController($scope){
console.log(this instanceof MyController); //返回true证明被new过。(构造函数)
}

依赖对象:完成某个特定的功能需要依赖某个对象才能实现,这个对象就是依赖对象。
依赖注入:依赖的对象以形参的方式被注入进来使用,这种方式就是声明式依赖注入。

angularjs中的“$scope”对象就是依赖对象,并且是依赖注入的形式进行使用。
angularjs中的$scope,形参必须是特定的名称,否则angularjs无法注入抛异常。

回调函数的event就是依赖对象,回调函数有形参,就是依赖注入。
function aa(event){
alert(event.clientX);
}

angularjs中的模块对象和表达式:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>angularjs测试</title>
    <script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script>
</head>
<!--<body ng-app="" ng-init="age=12">
    <div ng-controller="MyController">
       <input type="text" ng-model="firstName"/>
        <input type="text" ng-model="lastName" />
         <p>姓名1:{{firstName+'-'+lastName}}</p>
        <p>姓名2:{{getName()}}</p>
        <p>年龄:{{age}}</p>
    </div>

    <script type="text/javascript">
        function MyController($scope) {
            console.log($scope);
            $scope.firstName = "kobe";
            $scope.lastName = "zain";
            $scope.getName = function () {
                return $scope.firstName +' '+ this.lastName;
            }
        }
    </script>
             //angularjs1.2.29的写法,现在不适用了。
</body>-->
<body ng-app="myApp">

    <div ng-controller="myController">
        <input type="text" ng-model="empName" />
        <p>员工名字1:{{empName}}</p>
  
    </div>
    <div ng-controller="myController2">
        <input type="text" ng-model="empName" />
        <p>员工名字2:{{empName}}</p>
    </div>
     <script type="text/javascript">
         console.log(angular);

         //优化,链式调用
         //angular.module("myApp", [])
         //    .controller("myController", function ($scope) {      //隐式声明依赖注入
         //        $scope.empName = "zain";
         //    })
         //    .controller("myController2", function ($scope) {
         //        $scope.empName = "kobe";
         //    })


         //以上的代码会有问题
         //js代码压缩后形参会用abcd字母代替
         //代码压缩的$scope会被abcd代替,angular解析不了。


         //解决方案
         angular.module("myApp", [])
             .controller("myController", ["$scope", function ($scope) {            //显示声明依赖注入
                  $scope.empName = "zain";
             }])
             .controller("myController2", ["$scope", function ($scope) {
                 $scope.empName = "kobe";
             }])
              
     </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>angularjstest2</title>
    <script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script>
</head>
<body ng-app="myApp">

    <!--使用angularjs表达式:
      *语法:   {{expression}}
      *作用:显示表达式的结果数据
      *注意:表达式中引用的变量必须是当前域对象有的属性(包括其原型属性)
    操作的数据:
      *基本类型数据: number/string/boolean
      *undefined,Infinity,NaN,null解析为空串:"",不显示任何效果
      *对象的属性或方法
      *数组-->
    <div ng-controller="myCtrl">
        <p>{{"aaa"}}</p>
        <p>{{abc}}</p>

         <!--对字符串进行反序输出-->
        <p>{{abc.split('')}}</p>
        <p>{{abc.split('').reverse()}}</p>
        <p>{{abc.split('').reverse().join('')}}</p>

    </div>


    <script type="text/javascript">
        angular.module("myApp", [])
            .controller("myCtrl", ["$scope", function (a) {
                a.abc = "NBA";
            }])

    </script>

</body>
</html>

angularjs中的常用指令1:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>angularjstest3</title>
    <script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script>
</head>
<body ng-app="myApp">

    <div ng-controller="myCtrl">

        <div>
            <p>价格计算器:(自动)</p>
            数量: <input type="number" ng-model="count" />
            价格: <input type="number" ng-model="price" />
            <p>总计: {{count*price}}</p>

        </div>

        <div>
            <p>价格计算器:(手动)</p>
            数量: <input type="number" ng-model="count2" />
            价格: <input type="number" ng-model="price2" />
            <button ng-click="getTotalPrice()">计算</button>
            <p>总计: {{totalPrice}}</p>

        </div>

        <div>
            <h2>人员信息列表</h2>
            <ul>
                <li ng-repeat="person in persons">
                {{$odd}}--{{$index}}---{{person.username}}
                </li>
            </ul>
        </div>

          <!--*ng-bind:解决使用{{}}显示数据闪屏(在很短时间内显示{{}})-->

          <div>
              <p>{{123}}</p>
              <p ng-bind="123"></p>
          </div>

        <div>
             <button ng-click="changeLike()">切换喜欢</button>
            <p ng-show="islike">我喜欢贾静雯</p>
            <p ng-hide="islike">贾静雯喜欢我</p>
        </div>

        
    </div>


     <script type="text/javascript">
         angular.module("myApp", [])
             .controller("myCtrl", ["$scope", function (a) {
                 a.count=20;
                 a.price = 1;

                 a.count2 = 10;
                 a.price2 = 2;
                 a.totalPrice=20;
                 a.getTotalPrice = function () {
                     a.totalPrice= a.count2 * a.price2;
                 }

                 //初始化人员数据
                 a.persons = [
                     { username: 'zain', age: 27 },
                     { username: 'kobe', age: 27 },
                     { username: 'jack', age: 27 },
                     { username: 'choke', age: 27 },
                     { username: 'json', age: 27 }
                 ];

                 a.islike = true;

                 a.changeLike = function () {
                     a.islike = !a.islike;
                 }
              }])

     </script>

</body>
</html>

angularjs中的常用指令2:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>angularjstest4</title>
    <script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script>
    <style>
        .oddB{
              background:gray;
        }
        .evenB{
            background:red;
        }
    </style>
</head>
<body ng-app="myApp">

     <div ng-controller="myCtrl">

           <div style="width:200px;height:200px;" ng-style="mystyle"
                ng-mouseenter="enter()" ng-mouseleave="leave()">

           </div>

         <ul>
             <li ng-class="{oddB:$odd,evenB:$even}" ng-repeat="t in persons">
                {{t.username}}--{{t.age}}
             </li>
         </ul>

     </div>

    <script type="text/javascript">
        angular.module("myApp", [])
            .controller("myCtrl", ["$scope", function (a) {
                a.mystyle = {
                      background:"green"
                };
                a.enter = function () {
                    a.mystyle.background = "deepPink";
                };
                a.leave = function () {
                    a.mystyle.background = "green";
                };
                a.persons = [
                    { username: "zain", age: 27 },
                    { username: "jack", age: 27 },
                    { username: "solin", age: 27 },
                    { username: "json", age: 27 },
                    { username: "joke", age: 27 },
                    { username: "zuak", age: 27 }
                ];
                  
               }])

    </script>

</body>
</html>

猜你喜欢

转载自www.cnblogs.com/zhumeiming/p/9785631.html
今日推荐