Friday, 8 December 2017

Routing is not working with AngularJS

itemprop="text">

As a part of learning process, I am
roaming around angular js routing concepts. For this, I created one inner folder inside
app with two sample test html pages ..



When i
run the app it should load first page from that folder but it does not not happening ..
I am not sure where i have done wrong in this
code...



I am getting error like this
'angular.js:4640Uncaught Error:
[$injector:modulerr]'



Below is my
controller code 




var
            myApp = angular.module('myApp', ['ngRoute']); 
 myApp.config(function
            ($routeProvider) {

$routeProvider
 .when('/',
            {
 templateUrl: 'Pages/main.html',
 controller:
            'mainController'
 })


 .when('/second',
            {
 templateUrl: 'Pages/second.html',
 controller:
            'secondController'
 })
 });


            myApp.controller('mainController', ['$scope','$log', function($scope,$log) {
            
}]);
 myApp.controller('secondController', ['$scope','$log',
            function($scope,$log) {
            
}]);



and
html code goes here 



            html>


            
 Learn and Understand<br />            AngularJS
             content="IE=Edge">
             charset="UTF-8">


 
             href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
            integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
            crossorigin="anonymous">
 


 
             src="https://code.angularjs.org/1.5.8/angular.min.js">

                        src="https://code.angularjs.org/1.5.8/angular-route.min.js">






class="container">









and
for main.html 





            
this is main
            page



and
for second.html



 
this is
            second
            page



Would
any one please help on this
query,




many thanks in
advance..



Answer




Things seem to be working fine for me. See
the working example below:



(Just change the
href of Home link to
#/)



data-lang="js" data-hide="false" data-console="true"
data-babel="false">

class="snippet-code-js lang-js prettyprint-override">var myApp =
angular.module('myApp',
['ngRoute']);

myApp.config(function($routeProvider)
{

$routeProvider
.when('/', {
templateUrl:
'Pages/main.html',
controller: 'mainController'

})

.when('/second', {
templateUrl:
'Pages/second.html',

controller: 'secondController'

})
});

myApp.controller('mainController', ['$scope',
'$log',
function($scope, $log)
{}
]);
myApp.controller('secondController', ['$scope',
'$log',
function($scope, $log)
{}
]);

class="snippet-code-css lang-css
prettyprint-override">html,
body,
input,
select,
textarea
{
font-size: 1.05em;
}
class="snippet-code-html lang-html prettyprint-override"> rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">



src="https://code.angularjs.org/1.5.8/angular.min.js">
src="https://code.angularjs.org/1.5.8/angular-route.min.js">
ng-app="myApp">







class="container">












Edit



Don't
directly serve your Angular code using file:/// protocol. It
will not be able to make request to load resources. Use any simple lightweight servers,
for
example:





  1. Python
    Simple server for Linux based platforms (python -m
    SimpleHTTPServer    )

  2. href="https://github.com/cesanta/mongoose" rel="nofollow">Mongoose for
    Windows


-

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

php - file_get_contents shows unexpected output while reading a file

I want to output an inline jpg image as a base64 encoded string, however when I do this : $contents = file_get_contents($filename); print ...