困扰我与AngularJS几个基本问​​题 [英] Few basic questions troubling me related to AngularJS

问题描述

我开发的演示应用学习AngularJS。几件事情困扰着我。

1 - 是什么

之间的区别

 ＆LT; D​​IV NG控制器=Page2Ctrl＆GT;＆LT; / DIV＆GT;
 

和

 时，（'/第2页'，{templateUrl：意见/初级流瑜伽/ page2.html，控制器：'Page2Ctrl'}）。
 

问这个，因为无论是工作的罚款。是否有必要定义 NG-控制器，即使控制器在路由定义的HTML？

2 - 是什么

之间的区别

 函数Pag​​e4Ctrl（$范围）{
    $ scope.pageName =第4页加载。
}
 

和

  app.controller（'Page4Ctrl'，函数（$范围）{
    $ scope.pageName =第4页加载。
}）;
 

二是冗长的，需要额外的输入。使用它们任何建议？

3 - 假设我开发一个客户CRUD应用程序。我做一个CustomerController.js文件，我希望把所有相关的客户（创建，读取，更新，删除，FindById，的FindAll等）的方法。如下图所示。这是正确的做法或控制器应该是CustomerController其中包含CRUD的所有方法？

  app.controller（'CustomerCreateController'，函数（$范围内）{}）;
app.controller（'CustomerEditController'，函数（$范围内）{}）;
app.controller（'CustomerDeleteController'，函数（$范围内）{}）;
 

解决方案

1）：当键入 NG-控制器直接向您的看法鉴于有直接领带该控制器。在路由定义控制器，可以重复使用其他需要的视图。

例如，您有一个显示名称的列表视图。

 ＆LT; UL NG控制器=的ListCtrl＆GT;
   ＆LT;李NG重复=中的项项＆GT; {{item.name}}＆LT; /李＆GT;
＆LT; / UL＆GT;
 

现在别的地方在你的应用程序，你有一个显示名称列表，你会需要再次做同样的事情完全一样的结构。

 ＆LT; UL NG控制器=MyOtherListCtrl＆GT;
   ＆LT;李NG重复=中的项项＆GT; {{item.name}}＆LT; /李＆GT;
＆LT; / UL＆GT;
 

如果您删除 NG-控制器属性可以重用这个＆LT; UL /＆GT;

 ＆LT; UL＆GT;
   ＆LT;李NG重复=中的项项＆GT; {{item.name}}＆LT; /李＆GT;
＆LT; / UL＆GT;
 

和

 。当（'/ list1的'，{templateUrl：list.html'，控制器：'的ListCtrl'}）
。当（'/列表2'，{templateUrl：list.html'，控制器：'MyOtherListCtrl'}）
 

2） app.controller 作用域控制器到您的模块，而其他创建的全球范围内的控制器。

3）我要看你如何让应用程序的结构，但只需在创建一个具有 $范围方法编辑CustomerController，删除，和创造。该控制器可以采取服务的依赖或 $ resoruce

  app.controller（'CustomerController'，函数（$范围，为CustomerService）{
    $ scope.add =功能（客户）{
       //使用的CustomerService客户添加
    };
    $ scope.edit =功能（客户）{
       //编辑客户提供的CustomerService
    }
    $ scope.delete =功能（客户）{
       //删除客户提供的CustomerService
    }
}）;
 

如果你想单独的页面你仍然可以重复使用相同的控制器。

 。当（'/加'，{templateUrl：add.html'，控制器：'CustomerController'}）
。当（'/编辑'，{templateUrl：edit.html'，控制器：'CustomerController'}）
。当（'/删除'，{templateUrl：delete.html'，控制器：'CustomerController'}）
 

I am developing demo application to learn AngularJS. Few things troubling me.

1 - What is the difference between

<div ng-controller="Page2Ctrl">

</div>

and

when('/page2', {templateUrl: 'views/flow1/page2.html', controller: 'Page2Ctrl'}).

Asking this because either is working fine. Is it necessary to define ng-controller in Html even if controller is defined in Routes?

2 - What is the difference between

function Page4Ctrl($scope){
    $scope.pageName = "Page 4 loaded."
}

And

app.controller('Page4Ctrl', function ($scope) {
    $scope.pageName = "Page 4 loaded."
});

second is verbose and need extra typing. Any suggestion on using them?

3 - Suppose I am developing a CRUD application for Customer. I make a CustomerController.js file where I want to put all the methods related to Customer (Create, Read, Update, Delete, FindById, FindAll etc). like below. Is this the right approach or controller should be one CustomerController which contains all the methods of CRUD?

app.controller('CustomerCreateController', function ($scope) {});
app.controller('CustomerEditController', function ($scope) {});
app.controller('CustomerDeleteController', function ($scope) {});

解决方案

1) When typing the ng-controller directly to your view that view has a direct tie to that controller. Defining the controller in the route allows you to reuse the view for other needs.

For example, you have a view that displays a list of names.

<ul ng-controller="ListCtrl">
   <li ng-repeat="item in items">{{item.name}}</li>
</ul>

Now someplace else in your application you have the same exact structure that displays a list of names you would need to do the same thing again.

<ul ng-controller="MyOtherListCtrl">
   <li ng-repeat="item in items">{{item.name}}</li>
</ul>

If you remove the ng-controller attribute you can reuse this <ul/>

<ul>
   <li ng-repeat="item in items">{{item.name}}</li>
</ul>

and

.when('/list1', {templateUrl: 'list.html', controller: 'ListCtrl'})
.when('/list2', {templateUrl: 'list.html', controller: 'MyOtherListCtrl'})

2) app.controller scopes the controller to your module while the other creates the controller on the global scope.

3) I depends how you have your application is structured, but Simply creating a CustomerController that has $scope methods for edit, delete, and create. This controller can take a dependency of a Service or $resoruce

app.controller('CustomerController', function ($scope, customerService) {
    $scope.add = function(customer){
       //add customer with customerService
    };
    $scope.edit = function(customer){
       //edit customer with customerService
    }
    $scope.delete = function(customer){
       //delete customer with customerService
    }
});

If you want separate pages you could still reuse the same controller.

.when('/add', {templateUrl: 'add.html', controller: 'CustomerController'})
.when('/edit', {templateUrl: 'edit.html', controller: 'CustomerController'})
.when('/delete', {templateUrl: 'delete.html', controller: 'CustomerController'})

这篇关于困扰我与AngularJS几个基本问​​题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！