CODEWITHSUNDEEP
javascriptangularjs
Peter Mingione
Peter Mingione

Reputation: 73

ANGULARJS: NOVICE TO NINJA chapter 4

I am working my way through the sitepoint ANGULARJS: NOVICE TO NINJA book. I am stuck on the last example in chapter 4. In this app the built in angular ngRoute module is replaced with the more powerful Angular UI Router module. I can't seem to get it to work and I am wondering what I have done wrong. Below is the code for the index page as well as the view1.html and view2.html. Thanks for the help.

 <!DOCTYPE html>
<html ng-app="myApp">

<head>
    <meta charset="utf-8" />
    <title ng-bind="title"></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
    <script src="https://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
</head>

<body>
    <h3>Chapter 4 - App 15a - {{title}}</h3>
    <ul class="menu">
        <li><a ui-sref="view1">view1</a></li>
    </ul>
    <div ng-view></div>

<script>
'use strict';

angular.module('myApp', [
                            'myApp.controllers',
                            'ngRoute',
                            //This is the dependency on ui.router module
                            'ui.router' 
                        ]
);

// .run() gets called when all the modules are loaded
angular.module('myApp').run(
    function($rootScope){
        $rootScope.title = 'Angular Routing - The Angular UI Router';
    }
);

// $stateProvider and $urlRouterProvider are from ui.router module
angular.module('myApp').config(
    function($stateProvider, $urlRouterProvider, $locationProvider){ 
        $stateProvider
            .state('view1', {
                                url: '/view1',
                                controller:'Controller1',
                                templateUrl:'/partials/view1.html'
            })
            .state('view2', {
                                url: '/view2/:firstname/:lastname',
                                controller:'Controller2',
                                resolve:{
                                            names:  function(){
                                                        return ['Misko','Vojta','Brad'];
                                                    } 
                                },
                                templateUrl: '/partials/view2.html'
                            }
            );

    // when no route match found redirect to /view1
    $urlRouterProvider.otherwise('/view1'); 

    $locationProvider.html5Mode(true);
});

angular.module('myApp.controllers', [])
    .controller('Controller1', function($scope, $location, $state) {
        $scope.loadView2 = function() {
            // the following activates state view2
            $state.go('view2', {
                                    firstname: $scope.firstname,
                                    lastname: $scope.lastname
                                }
            );
        } 
    }
);

angular.module('myApp.controllers')
    .controller('Controller2', function($scope, $stateParams, names){
        $scope.firstname=$stateParams.firstname;
        $scope.lastname=$stateParams.lastname;
        $scope.names=names;
});

</script>
</body>
</html> 

<!-- Contents of view1.html -->

    <p>
        First name: <input type="text" ng-model="firstname" style="border:1px solid black;" /> <br/>
        <br/>
        Last name: <input type="text" ng-model="lastname" style="border:1px solid black;" /> <br/>
        <br/>
        <button ng-click="loadView2()">Load View2</button>
    </p> 


<!-- Contents of view2.html -->



    <p>
        From View2.
        <ul>
            <li>First name: {{firstname}}</li>
            <li>Last name: {{lastname}}</li>
        </ul>

        Our additional users are:
        <ul>
            <li ng-repeat="name in names">
                {{name}}
            </li> 
        </ul>
    </p>

Upvotes: 1

Views: 72

Answers (1)

Shashank Vivek
Shashank Vivek

Reputation: 17504

Change http to https , and it should work. Here you go .Add necessary views accordingly.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>

Update1

added <div ui-view></div> in index.html, earlier it wasnt there. You had ng-view which is for ngRoute not ui.router

Upvotes: 1

Related Questions