理解 的 控制者s – 部分 4

by Santhakumar Munuswamy

  Posted on  25 十二月 2015

  角度的JS


 

这个 article explains understand the controller with a sample application and its usage of controller discussion to here.

In my previous article, we saw what is the difference between AngularJs and other java script frameworks? The series of 文章 written on AngularJs and here are the links

控制者s

A controller is a set of Java Script function which is bound to a specified scope. 的 ng -

控制者 指示, Angular wills instantiate the new controller object, and injects the new scope as a dependency.

It contains business logic for the view and avoids using to manipulate the DOM.  

 

控制者 规则 

  • We can use controller to set up the initial state of the scope object and add behavior to that object. 
  • We do not use controller to manipulate DOM.  It should contain only business logic and can use data binding 和  directives for the DOM manipulation.
  • We do not use controllers to format input but can use angular form controls instead of that.
  • We do not use filter output but can use angular filters instead of that.
  • We do not use controllers to share code or state across controllers but can use angular services instead of that.
  • We do not manage the life-cycle of other components

创造 a Controller 

  • 需要 ng 控制器 directive
  • 加 controller code to a module
  • 名称 your controller based on functionality
  • 控制者 are named using camel case (i.e. S实施控制者)

建立 the initial state of the scope object

什么时候 you have create an angularjs sample application in AngularJs. First, you need to initialize state of the scope 目的 和 associate the properties to the scope object in Angular. It is provide an in build directive to use ng-控制者 directive in the AngularJs application.

ng -控制者 directive 

ng -Controller directive is an associated a controller class to the view

怎么样 to use ng-Controller 

<Any 

ng-Controller=”expression”>

</Any> 
<div ng -app="mainApp" ng 控制器="SimpleController">
</div>

步骤1: 

打开Visual 工作室 2015并转到文件菜单,指向新的,然后单击新项目。新的ASP.NET项目窗口将打开,您可以选择一个ASP.NET Web应用程序并键入项目名称AngularJsControllerDemo,选择项目 位置路径,然后单击确定按钮。

 New ASP.NET project window will open, you can select a 空的 Template with No Authentication and

 then click OK button.  












Go to Solution Explorer and right click the project name and then click Manage NuGet Packages 

NuGet Package Manager window will open and you can type AngularJS and browse. Also select 角度的JS.Core 
和 click Install
按钮。

预习 window will open and you can see the AngularJS version installing details and click OK button. 

后 it is successfully installed in AngularJS, you can see the following,

您 can see 角度的JsControllerDemo 项目 structure in the following screen shot.

加 SimpleController.html  

Go to Solution Explorer and right click the project name and point the Add 的n click the HTML Page. 

您 can type the item name SimpleController.html and click OK button. 

加 SimpleController.js

Go to Solution Explorer and right click the 控制者 folder name and point the Add 的n click the Java script file. 

您 can type the item name SimpleController.js 和 click OK button.

步 2:  

SimpleController.html code here

<!DOCTYPE html>
<html>
<head>
    <title> San2debug.net | 角度的Js 控制者 应用 Demo</title>
	<meta charset="utf-8" />
    <script src="Scripts/angular.min.js"></script>
    <script src="Controller/SimpleController.js"></script>

</head>
<body>
    <h2>AngularJs 控制者 应用 Demo</h2>
    <div ng -app="mainApp" ng 控制器="SimpleController">
        First 名称: <input 类型="text" ng -model="employee.firstName" /><br /><br />
        Last 名称:  <input 类型="text" ng -model="employee.lastName" /><br /><br />
        <hr />                                                                
        <div>
           <strong>Employee Full 名称</strong> : {{employee.fullName()}}
        </div>
    </div>  
</body>
</html>

SimpleController.js code here

var mainApp = 角度的.module("mainApp", []);

mainApp.controller("SimpleController", 功能 ($scope) {
    $scope.employee = {

        firstName: "Santhakumar",
        lastName: "Munuswamy",

        fullName: 功能 () {
            
            var employee;
            employee = $scope.employee;
            return employee.firstName + " " + employee.lastName;

        }            

    };
})


MultipleController.html code here

<!DOCTYPE html>
<html>
<head>
    <title>San2debug.net | 角度的Js 控制者 应用 Demo</title>
	<meta charset="utf-8" />
    <link rel="stylesheet" href="Style/Style.css" />
    <script src="Scripts/angular.min.js"></script>
    
    <script src="Controller/MultipleController.js"></script>
</head>
<body ng -app="mainApp">
    <div 类="main">
        <div ng 控制器="MultipleController" >
            <p>{{name}}</p>
            <div ng 控制器="ChildController">
                <p>{{name}}</p>
                <div ng 控制器="ParentChildController">
                    <p>{{name}}</p>
                </div>
            </div>            
        </div>
    </div>
</body>
</html>

MultipleController.js code here

var mainApp = 角度的.module("mainApp", []);

mainApp.controller("MultipleController", 功能 ($scope) {

    $scope.name = "Welcome Microsoft";

});

mainApp.controller("ChildController", 功能 ($scope) {

    $scope.name = "Welcome C# Corner";

});

mainApp.controller("ParentChildController", 功能 ($scope) {

    $scope.name = "Welcome San2debug.net";

});

脚步 3: 

角度的JS 控制者 应用 demo output as in the following screen 射击












结论:

这个 article helps you to understand  
的 Controller  a sample application using Visual Studio 2015. 

谢谢 you for reading my articles. Kindly share your comments or suggestion.

 


0c7a41cf-8773-4269-ad61-7978a3e3b967 | 0 | .0 | 96d5b379-7e1d-4dac-a6ba-1e50db561b04

分享:

关于 的 作者
Santhakumar Munuswamy是一位经验丰富的解决方案架构师,并且是Cloud / AI解决方案中最有价值的专家。他在解决方案设计,软件产品开发,技术文档,Web和云应用程序的项目管理方面拥有大约14年的经验。他在不同领域(汽车,电信,医疗保健,物流和仓库自动化等)的IT行业经验丰富,担任过技术架构师,Genesys顾问,技术负责人,团队负责人和开发人员。他在指导和指导高潜力开发人员方面经验丰富。

跟着我: 脸书, 推特, 谷歌加, 领英
blog 评论 powered by 领英


月份清单

新sletter

Get 不ified when a 新 post is published.


社区徽章