AngularJs тайны

Я действительно думал, что я получаю повесить AngularJs медленно - но, кажется, я до сих пор полностью зеленый .....AngularJs тайны

Я попытался собрать крошечные демо, чтобы показать ng-repeat директиву, и Теперь ничего работает - я просто получаю пустой экран, и у меня нет подсказки, почему .... не

Может кто-нибудь просветить меня ??

Это мой HTML-файл:

<!doctype html> 
<head> 
    <!-- include link to Angular --> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 

    <!-- include app.js --> 
    <script src="app.js"></script> 
</head> 
<body ng-app="myapp"> 
    <div ng-controller="mycontroller as vm"> 
     <label>My company:</label> 
     <hr> 
     <div id="divTeam" ng-repeat="m in vm.team"> 
      <p> 
       {{m.firstname}} {{m.name}} ({{m.tag}}) 
      </p> 
     </div> 
    </div> 
</body>

и это мой app.js файл (тот же каталог):

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

    app.controller('mycontroller', function ($scope) { 
      $scope.team = [ 
       { name: "Brown", firstname: "Leo", tag: "lebr" }, 
       { name: "Smith", firstname: "Adrian", tag: "adsm" }, 
       { name: "Loflin", firstname: "Wes", tag: "welo" }, 
       { name: "Hackett", firstname: "John", tag: "joha" } 
      ] 
     } 
    );

Я не понимаю ....

Я создаю Угловой модуль под названием myapp
я ссылаться на этот модуль в <body ng-app="myapp"> теге
Я создаю Угловой контроллер под названием mycontroller
я ссылаться, что в <div ng-controller="mycontroller as vm"> теге
Я создаю массив объектов на $scope
Я ожидал, что сможет выполнять итерацию по этому массиву объектов, используя директиву ng-repeat="m in vm.team"

, но все это я получаю прямо сейчас пустой экран только с названием «Моя компания:» - и ничего .....

Я проверил URL к файлу Угловая JS - это правильно насколько я могу судить.
Я проверил консоль Javascript в IE или Chrome - без ошибок и информационных сообщений, чтобы увидеть в любом месте .....
Если добавить только простое маленькое выражение как {{1+2}} к моему HTML, это действительно становится evaluted к " 3 ", поэтому я уверен, что угловой запущен и запущен ....

Итак, что мне не хватает? (Я разработчик .NET давно, всегда борется со всеми вещами Javascript .....)

источник

2016-05-04 marc_s

используется синтаксис controllerAs, при написании ng-controller="mycontroller as vm", вы должны связать свои данные this вместо $scope

app.controller('mycontroller', function ($scope) { 
     this.team = [ 
      { name: "Brown", firstname: "Leo", tag: "lebr" }, 
      { name: "Smith", firstname: "Adrian", tag: "adsm" }, 
      { name: "Loflin", firstname: "Wes", tag: "welo" }, 
      { name: "Hackett", firstname: "John", tag: "joha" } 
     ] 
    } 
);

Или удалите синтаксис.

источник

2016-05-04 09:02:59 Walfrat

Так что, если я ** не ** использую 'controller as ...', а просто 'ng-controller =" mycontroller "' .... что мне нужно использовать для правильной настройки массива? –

это работает, просто измените 'ng-repeat =" m в vm.team "' на 'ng-repeat =" m в команде "'. Синтаксис ControllerAs рекомендуется специально, если вы используете много 'ng-controller'. Лично я не так, я не использую его. – Walfrat

Это ** безумие ** - поэтому способ, которым я буду использовать контроллер позже в коде, диктует, как я должен выполнить настройку для любых элементов данных, содержащихся в '$ scope'?!?!?!? ! ?? *** <трясущаяся голова в недоумении> *** –

«ТИМ» находится в $ объеме, так что вы можете назвать «командой» прямо на ваш взгляд:

<body ng-app="myapp"> 
    <div ng-controller="mycontroller as vm"> 
     <label>My company:</label> 
     <hr> 
     <div id="divTeam" ng-repeat="m in team"> 
      <p> 
       {{m.firstname}} {{m.name}} ({{m.tag}}) 
      </p> 
     </div> 
    </div> 
</body>

источник

2016-05-04 09:06:54

вам просто нужно remouve vm из vm.team здесь является рабочим plunker

источник

2016-05-04 09:12:45

Одним из подходов является привязка к thisvm следующим образом (как John Papa Angular 1 Style Guide):

JS Controller:

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

app.controller('MyController', function() { 
    var vm = this; 

    vm.teams = [ 
     { name: "Brown", firstname: "Leo", tag: "lebr" }, 
     { name: "Smith", firstname: "Adrian", tag: "adsm" }, 
     { name: "Loflin", firstname: "Wes", tag: "welo" }, 
     { name: "Hackett", firstname: "John", tag: "joha" } 
    ]; 
});

Здесь нам не нужна зависимость $scope, так как мы ее не будем использовать.

И в HTML, можно использовать следующий синтаксис:

<div ng-controller="MyController as mc"> 
    <div ng-repeat="team in mc.teams"> 
     <p> 
      {{team.firstname}} {{team.name}} ({{team.tag}}) 
     </p> 
    </div> 
</div>

Второй подход заключается в использовании $scope следующим образом:

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

app.controller('MyController', function ($scope) { 
    $scope.teams = [ 
     { name: "Brown", firstname: "Leo", tag: "lebr" }, 
     { name: "Smith", firstname: "Adrian", tag: "adsm" }, 
     { name: "Loflin", firstname: "Wes", tag: "welo" }, 
     { name: "Hackett", firstname: "John", tag: "joha" } 
    ]; 
});

Здесь мы используем $scope.

И в HTML, как это:

<div ng-repeat="team in teams"> 
    <p> 
     {{team.firstname}} {{team.name}} ({{team.tag}}) 
    </p> 
</div>

Не забудьте связать конкретный HTML-страницу с соответствующим контроллером.

app.config(['$routeProvider', function($routeProvider) { 
    $routeProvider. 
     when('/myPage', { 
      templateUrl: 'views/myPage.html', 
      controller: 'MyController' 
     }). 
     otherwise({ 
      redirectTo: '/404' 
     }); 
}]);

Вы можете использовать $routeProvider или $stateProvider, что вы решили.

источник

2016-05-04 09:16:12

Спасибо, особенно за ссылку на руководство по стилю Джона Папы. Кажется, у меня все еще есть * много, чтобы учиться с точки зрения Javascript + Angular! –

AngularJs тайны

ответ

Смежные вопросы