CODEWITHSUNDEEP
angularjsangularjs-scopeangular-routing
Al Ex Tsm
Al Ex Tsm

Reputation: 2102

Angular view not loading

Im not sure where to place the partials folder holding the html views! I have placed it at the app root folder, in views and in public. Also tried removing the first trailing slash of the templateUrl but nothing. I also have tried(as view loading container):

<div ng-view></div>
<ng-view></ng-view>
<div data-ng-view></div>
<div ng-view=""></div>
<div ng-view="demoApp"></div>

This is just a learning example holding a module with 2 controllers and 2 views.

Here is the SPA(this page renders as rout '/' of a dancer(perl) project):

<!DOCTYPE html>
<html ng-app="demoApp">
  <head>
    <title><% title %></title>
    <link rel="stylesheet" href="/customised_bootstrap/css/bootstrap.css">
    <script src="/bower_components/underscore/underscore.js"></script>
    <script src="/bower_components/backbone/backbone.js"></script>
    <script src="/bower_components/angular/angular.js"></script>
    <script src="/bower_components/angular-resource/angular-resource.js"></script>
    <script src="/bower_components/angular-route/angular-route.js"></script>
    <script src="/bower_components/ng-tasty/ng-tasty-tpls.js"></script>    

    <script>
      //define a module
      var demoApp = angular.module('demoApp', ['ngRoute']);

      //define routes for our module(each route will have its set of views and controllers)
      demoApp.config =(function ($routeProvider) {
        $routeProvider
          .when('/',
            {
              controller: 'simpleController1',
              templateUrl: '/partials/testAlexView1.html'
            })
          .when('/testAlexView1',
            {
              controller: 'simpleController2',
              templateUrl: '/partials/testAlexView1.html'
            })
          .when('/testAlexView2',
            {
              controller: 'simpleController2',
              templateUrl: '/partials/testAlexView2.html'
            })
          .otherwise({redirectTo: '/partials/testAlexView1.html'});
      });

      //define a controller within our module 'demoApp'
      demoApp.controller('simpleController1', function ($scope) {
        $scope.customers = [
          {name:'Boris', age:'18'}, 
          {name:'Claudia', age:'28'}, 
          {name:'Carlos', age:'39'}, 
          {name:'Ben', age:'25'}
        ];
        //var stuff ={};
      });

      demoApp.controller('simpleController2', function ($scope) {
        $scope.customers = [
          {name:'Alex', age:'18'}, 
          {name:'Albert', age:'28'}, 
          {name:'Anthony', age:'39'}, 
          {name:'Loren', age:'25'}
        ];
      });
    </script>

  </head>

<body>
  <div>
    <p>Main page of SPA test</p>
      <div ng-view></div>
  </div>
</body>
</html>

Here are the two identical views:

testAlexView1.html(testAlexView2.html is the same):

<div>
  <input type="text" data-ng-model="name" /> {{ name }}
  <br />
  <ul>
    <li data-ng-repeat="customer in customers | filter:name | orderBy:'age'">
      {{customer.name}} - {{customer.age}}
    </li>
  </ul>
</div>

In the browser inspector, within the div where the view should load, all that appears is(both at root or root#/view.html):

<!-- ngView:  -->

Batarang dosn't detect scopes nor modules neither. Thanks for any help!

Upvotes: 1

Views: 390

Answers (1)

MattDionis
MattDionis

Reputation: 3616

There appears to be a typo in your config here:

demoApp.config =(function ($routeProvider) {

Instead try:

demoApp.config(function ($routeProvider) {

Upvotes: 2

Related Questions