zoukankan      html  css  js  c++  java
  • Part 32 AngularJS controller as syntax

    So far in this video series we have been using $scope to expose the members from the controller to the view.

    app.controller("mainController", function ($scope) {
        $scope.message = "Hello Angular";
    });

    In the example above we are attaching message property to $scope, which is automatically available in the view.

    <h1 ng-controller="mainController">{{message}}</h1>

    Another way that is available to expose the members from the controller to the view, is by using CONTROLLER AS syntax. With this syntax, there is no need to inject $scope object in to the controller function, instead you simply use this keyword as shown below.

    app.controller("mainController", function () {
        this.message = "Hello Angular";
    });

    In the view, you use, CONTROLLER AS syntax as shown below.

    <h1 ng-controller="mainController as main">{{main.message}}</h1>

    Now, let us see how we can use this CONTROLLER AS syntax in the example that we worked with in Part 31.

    Code changes in script.js. Notice the changes highlighted in yellow.
    1. In the when() function, notice that we are using CONTROLLER AS syntax
    2. With in each controller() function we are using this keyword to set the properties that we want to make available in the view
    3. Notice in studentsController and studentDetailsController we are assigning this keyword to variable vm. vm stands for ViewModel. You can give it any meaningful name you want.
    4. If you use this keyword in then() function as shown below, you would not get the result you expect. That's because 'this' keyword points to the window object when the control comes to then() function. 

    .controller("studentsController", function ($http) {
        $http.get("StudentService.asmx/GetAllStudents")
                            .then(function (response) {
                                this.students = response.data;
                            })
    })

    At this point we also need to modify all our partial templates

    Changes in home.html : Use homeCtrl object to retrieve the message property that the homeController has set.

    <h1>{{homeCtrl.message}}</h1>
     
    <div>
        PRAGIM Established in 2000 by 3 S/W engineers offers very cost effective training. PRAGIM Speciality in training arena unlike other training institutions
    </div>
    <ul>
        <li>Training delivered by real time software experts having more than 10 years of experience.</li>
        <li>Realtime projects discussion relating to the possible interview questions.</li>
        <li>Trainees can attend training and use lab untill you get a job.</li>
        <li>Resume preperation and mock up interviews.</li>
        <li>100% placement assistance.</li>
        <li>Lab facility.</li>
    </ul>

    Changes in courses.html : Use coursesCtrl object to retrieve the courses property that the coursesController has set.

    <h1>Courses we offer</h1>
    <ul>
        <li ng-repeat="course in coursesCtrl.courses">
            {{course}}
        </li>
    </ul>

    Changes in students.html : Use studentsCtrl object to retrieve the students property that the studentsController has set.

    <h1>List of Students</h1>
    <ul>
        <li ng-repeat="student in studentsCtrl.students">
            <a href="students/{{student.id}}">
                {{student.name}}
            </a>
        </li>
    </ul>

    Changes in studentDetails.html : Use studentDetailsCtrl object to retrieve the student property that the studentDetailsController has set.

    <h1>Student Details</h1>
    <table style="border:1px solid black">
        <tr>
            <td>Id</td>
            <td>{{studentDetailsCtrl.student.id}}</td>
        </tr>
        <tr>
            <td>Name</td>
            <td>{{studentDetailsCtrl.student.name}}</td>
        </tr>
        <tr>
            <td>Gender</td>
            <td>{{studentDetailsCtrl.student.gender}}</td>
        </tr>
        <tr>
            <td>City</td>
            <td>{{studentDetailsCtrl.student.city}}</td>
        </tr>
    </table>
    <h4><a href="students">Back to Students list</a></h4>

    You can also use CONTROLLER AS syntax when defining routes as shown below

    var app = angular
                .module("Demo", ["ngRoute"])
                .config(function ($routeProvider, $locationProvider) {
                    $routeProvider
                        .when("/home", {
                            templateUrl: "Templates/home.html",
                            controller: "homeController",
                            controllerAs: "homeCtrl"
                        })
                        .when("/courses", {
                            templateUrl: "Templates/courses.html",
                            controller: "coursesController as coursesCtrl",
                            controllerAs: "coursesCtrl"
                        })
                        .when("/students", {
                            templateUrl: "Templates/students.html",
                            controller: "studentsController as studentsCtrl",
                            controllerAs: "studentsCtrl"
                        })
                        .when("/students/:id", {
                            templateUrl: "Templates/studentDetails.html",
                            controller: "studentDetailsController as studentDetailsCtrl",
                            controllerAs: "studentDetailsCtrl"
                        })
                        .otherwise({
                            redirectTo: "/home"
                        })
                    $locationProvider.html5Mode(true);
                })

    In our next video we will discuss, how the CONTROLLER AS syntax can make our code more readable as opposed to using $scope when working with nested scopes. 

  • 相关阅读:
    SQLite数据库框架ORMLite与GreenDao的简单比较
    Spring Web MVC中的页面缓存支持 ——跟我学SpringMVC系列
    admin嵌套在spring mvc项目里,菜单栏点击新连接每次都会重置
    Spring MVC视图层:thymeleaf vs. JSP
    使用Spring标签库
    SpringMVC中Controller跳转到另一个Controller方法
    有趣iOS开展
    Java日期的格式String类型GMT,GST换算成日期Date种类
    javascript之Style物
    Tair LDB基于Prefixkey中期范围内查找性能优化项目总结
  • 原文地址:https://www.cnblogs.com/gester/p/5494407.html
Copyright © 2011-2022 走看看