I found a basic example on youtube that demonstrates routes through angular. When I load the set of files from this screen http://www.youtube.com/watch?v=zogrnQjHZAM it does not work.
I can see the index.html, but the partials do not render. I think it is because I am not serving these files through a server. If that is the case, how is angular different? I thought static files can be seen without them being served.
index.html -
<!doctype html>
<html ng-app="website">
<head>
<title>AngularJS Website</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/website.css">
</head>
<body>
<!-- top -->
<header id="header">
<h1 id="logo"></h1>
<div id="menu">
Home
About
Experiments
</div>
<div class="color"></div>
<div class="clear"></div>
</header>
<!-- //top -->
<div class="shadow"></div>
<div id="container">
<div ng-view></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script type="text/javascript" src="js/website.js"></script>
</body>
</html>
Router --
angular.module('website', []).
config(function ($routeProvider) {
$routeProvider.
when('/about', {templateUrl: 'partials/about.html', controller: 'AboutCtrl'}).
when('/experiments', {templateUrl: 'partials/experiments.html', controller: 'ExperimentsCtrl'}).
when('/home', {templateUrl: 'partials/home.html', controller: 'HomeCtrl'}).
otherwise({redirectTo: '/home'});
})
.controller('AboutCtrl', ['$scope', 'StateService', function ($scope, StateService) {
$scope.title = 'About Page';
$scope.body = 'This is the about page body';
$scope.message = StateService.getMessage();
$scope.updateMessage = function (m) {
StateService.setMessage(m);
};
}])
.controller('ExperimentsCtrl', ['$scope', 'StateService', function ($scope, StateService) {
$scope.title = 'Experiments Page';
$scope.body = 'This is the about experiments body';
$scope.message = StateService.getMessage();
$scope.updateMessage = function (m) {
StateService.setMessage(m);
};
}])
.controller('HomeCtrl', ['$scope', 'StateService', function ($scope, StateService) {
$scope.title = 'Home Page';
$scope.body = 'This is the about home body';
$scope.message = StateService.getMessage();
$scope.updateMessage = function (m) {
StateService.setMessage(m);
};
}])
.factory('StateService', function () {
var message = 'Hello Message';
var getMessage = function() {
return message;
};
var setMessage = function(m) {
message = m;
};
return {
getMessage: getMessage,
setMessage: setMessage
}
});
Your forgot to add ngRoute module in your module:
angular.module('website', [ngRoute]).
config(function ($routeProvider) ...
You also have to include the angular-route js file. Which is not bundled with angularjs now..
and this will work
Related
Below is my code:
Home.html and List.Html
<!DOCTYPE html>
<html ng-app="myApp">
<head >
<title>AngualrJS Controller</title>
</head>
<body >
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="HomeController.js"></script>
<script src="AddController.js"></script>
<script src="ListController.js"></script>
<script src="RouteController.js"></script>
List
<div ng-view></div>
</body>
</html>
List.html
<div ng-controller="ListController">List </div>
Below is HomeController.js
var app = angular.module("myApp");
app.controller('myCtrl', function ($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
ListController.js
var app = angular.module("myApp");
app.controller('ListController', function ($scope) {
});
Below is routerconfig.js
var app = angular.module("myApp", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "Home.html",
controller: "myCtrl"
})
.when("/list", {
templateUrl: "List.html",
controller: "ListController"
})
});
When I click on List page link is gives below error
"A controller with this name is not registered."
Routing dependency will go only with myApp.
Home Controller ::
var app = angular.module("myApp", ['ngRoute']);
app.controller('myCtrl', function ($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
& routerconfig.js::
angular.module("myApp").
config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "Home.html",
controller: "myCtrl"
})
.when("/list", {
templateUrl: "List.html",
controller: "ListController"
})
});
I hope this will work for you.
you wrote 3 times
var app = angular.module("myApp");
remove from ListController.js and from routerconfig.js
write one time into Home Controller in this way:
var app = angular.module("myApp", ["ngRoute"]);
I am learning AngularJs now a days and stuck in the error and couldn't resolve it for the last two days. First let's look at my code first:
MainPage.html
<!DOCTYPE html>
<html>
<head>
<title>Learn Angular Js - Scott Allen</title>
<meta charset="utf-8" />
</head>
<body ng-app="LearnAngular">
<h1>Git Hub Viwer</h1>
<div ng-view></div>
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="App.js"></script>
<script src="MainController.js"></script>
</body>
</html>
App.js
(function () {
var app = angular.module("LearnAngular", ["ngRoute"]);
app.config(function routeConfig($routeProvider) {
$routeProvider
.when("/main", {
templateUrl: function () {
debugger;
return "Main.html";
},
controller: "MainController"
})
.otherwise({ redirectTo: "/mian" });
});
}());
MainController.js
(function () {
var MainController = function ($scope, $interval, $location) {
alert("var MainController = function ($scope, $interval, $location) {};");
var decrementCountdown = function () {
$scope.countdown -= 1;
if ($scope.countdown < 1) {
$scope.search($scope.username);
}
};
var countDownPromise = null;
var startCountdown = function () {
countDownPromise = $interval(decrementCountdown, 1000, $scope.countdown);
};
$scope.search = function (username) {
if (countDownPromise) {
$interval.cancel(countDownPromise);
$scope.countdown = null;
}
// redirect to the url.
};
$scope.username = "angular";
$scope.countdown = 5;
startCountdown();
};
var app = angular.module("LearnAngular");
app.controller("MainController", MainController);
}());
Main.html
<div>
<h1>{{countdown}}</h1>
<form name="searchUser" ng-submit="search(username)">
<input type="search" required placeholder="Enter username to search" ng-model="username" />
<input type="submit" value="Search" />
</form>
</div>
When I run the application, i see this url:
http://localhost:52108/HomePage.html#/mian
which shows that I successfully redirect to the main route but Main.html is not being shown on the HomePage.html page and browser is not requesting for the Main.html when I examine the network of browser.
Here is the screen shot of my application:
I searched on the internet and tried many solutions but none of them solves my problem. I don't what is wrong with the code. I am developing in VisualStudio
Thanks in advance for your help and time.
You had typo in URL there in otherwise's redirectTo value, it should be /main
.otherwise({ redirectTo: "/main" });
I have following code to setup the routing using Angular UI Router:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Routing</title>
<script src="js/angular.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<base href="/" />
<script>
'use strict'
var myApp = angular.module('myApp', ['myApp.Controllers', 'ui.router']);
var myAppControllers = angular.module('myApp.Controllers', []);
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', 'Voita', 'Brad'];
},
},
templateUrl: '/partials/view2.html'
});
$urlRouterProvider.otherwise('/view1');
$locationProvider.html5Mode(true);
});
myAppControllers.controller('Controller1', function ($scope, $location, $state) {
$scope.loadView2 = function () {
$state.go('view2', {
firstname: $scope.firstname,
lastname: $scope.lastname
});
}
});
myAppControllers.controller('Controller2', function ($scope, $stateParams, names) {
$scope.firstname = $stateParams.firstname;
$scope.lastname = $stateParams.lastname;
$scope.names = names;
});
</script>
</head>
<body>
<ul class="menu">
<li><a ui-sref="view1">View1</a></li>
<li><a ui-sref="view2">View2</a></li>
</ul>
</body>
</html>
I checked multiple times and I don't see any errors in console window of the chrome browser.
Can anyone help me to resolve this issue?
There's no ui-view directive in your html code. So the views have nowhere to render. You should add at least
<div ui-view></div>
to show the content of the views.
Im tweaking the Up & Coming with Angularjs videos from Lynda.com. Currently im trying to utilize ng-bind-html with the ngSanitize feature so that I can keep HTML code in the JSON file. Here are my current pages, and im not sure how to show them off.
HTML- file
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-route.min.js"></script>
<script src="lib/angular/angular-animate.min.js"></script>
<script src="lib/angular/angular-sanitize.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main" ng-view></div>
</body>
App.js
var myApp = angular.module('myApp', [
'ngRoute',
'anatomyControllers'
]);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/list', {
templateUrl: 'partials/list.html',
controller: 'ListController'
}).
when('/details/:itemId', {
templateUrl: 'partials/details.html',
controller: 'DetailsController'
}).
otherwise({
redirectTo: '/list'
});
}]);
controller.js
var anatomyControllers = angular.module('anatomyControllers', ['ngAnimate', 'ngSanitize']);
anatomyControllers.controller('ListController', ['$scope', '$http', function($scope, $http) {
$http.get('js/data2.json').success(function(data) {
$scope.anatomy = data;
$scope.anatomyOrder = 'name';
});
}]);
anatomyControllers.controller('DetailsController', ['$scope', '$http','$routeParams', function($scope, $http, $routeParams) {
$http.get('js/data2.json').success(function(data) {
$scope.anatomy = data;
$scope.whichItem = $routeParams.itemId;
if ($routeParams.itemId > 0) {
$scope.prevItem = Number($routeParams.itemId)-1;
} else {
$scope.prevItem = $scope.anatomy.length-1;
}
if ($routeParams.itemId < $scope.anatomy.length-1) {
$scope.nextItem = Number($routeParams.itemId)+1;
} else {
$scope.nextItem = 0;
}
});
}]);
view
<div class="bio">
<h3>Structure</h3>
<p ng-bind-html="{{anatomy[whichItem].structure}}"></p>
</br>
<h3>Nerve</h3>{{anatomy[whichItem].nerve}}
</br>
<h3>Action</h3>{{anatomy[whichItem].action}}
</div>
Currently the Nerve, Action are visible, but the Structures is not showing up. Its the item im doing the ng-bind-html test on. Thanks everyone
-T
I'm able to my buttons work. The only is that I can't get them to work with AngluarJS. This is what happens: When I click the link to enter the page to where my facebook buttons are located, they don't show the first time. They only show up every time I click the refresh button at the top. How can I make it work so that they always show up right when I click the link to the page? My facebook div content code is under third.html which I labeled as FB Test on the app website. My script code for facebook is on my index.html page which is also where I set up my angular to link and label each page. Plus, please use a local host to test the app website. Here's my code:
index.html has...
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/master.css">
<script src= "js/angular.min.js"></script>
<script src= "js/angular-route.min.js"></script>
<script src= "js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<link href="js/angular.min.js.map"></link>
<link href="js/angular-route.min.js.map"></link>
<script>
var pattern = /http:.+?(?=.jpg)(....)/;
var pieces = [];
var data = $.ajax({
dataType: "json",
url: "js/data.json",
success: function(){
$.each(data.responseJSON,function(){
//todo: add a placeholder image if there wasnt a url
if(this.piece_image != ""){
this.image_URL = /http:.+?(?=.jpg)(....)/.exec(this.piece_image)[0];
}
pieces.push(this);
})
data.destroy;
}
});
</script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<!--style effects comment box position-->
<style>
.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {
width: 100% !important;
}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style] {
width: 100% !important;
}
</style>
</head>
<body ng-app="app" style="padding-top:20px;">
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
//*This is where our app id must go
//Note to myself:
//the following number was created from my test app called "Davidow Project test" which is currently not live
//login to facebook, go to https://developers.facebook.com/apps/ to see test app
appId : '435225213325487',
channelUrl : '//localhost:8080/#/second',
status : true,
xfbml : true,
version : 'v2.1'
});
};
</script>
<script>
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}
(document, 'script', 'facebook-jssdk'));
</script>
<div class="container">
Home |
Explore |
Gallery |
Map |
Tile View |
FB Test
<div ng-view></div>
<!--TWITTER-->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</body>
</html>
**third.html has...**
<!--FACEBOOK CONTENT-->
<!--*must replace data-href with url of app site-->
<!--like button and share buttons-->
<div class="fb-like" data-href="http://www.example.com/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
<!--comment section-->
<!--added in a data-width number to resize comment box-->
<div class="fb-comments" data-href="http://www.example.com/" data-numposts="3" data-width="350px;" data-colorscheme="light"
data-layout="standard"></div>
<!--TWITTER-->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
Tweet
**app.js has...**
var app = angular.module("app", ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: './views/main.html',
controller: 'mainController'
})
.when('/explore', {
templateUrl: './views/explore.html',
controller: 'mainController'
})
.when('/gallery', {
templateUrl: './views/gallery.html',
controller: 'gallery'
})
.when('/map', {
templateUrl: './views/map.html',
controller: 'mainController'
})
.when('/tileView', {
templateUrl: './views/tileView.html',
controller: 'tileView'
})
.when('/fbtest', {
templateUrl: './views/third.html',
controller: 'mainController'
})
});
app.controller('mainController', ['$scope', '$location', '$log', function($scope, $location, $log){
}]);
app.controller('gallery', ['$scope', '$location', '$log', function($scope, $location, $log){
$scope.pieces = pieces;
}]);
app.controller('tileView', ['$scope', '$location', '$log', function($scope, $location, $log){
window.scope = $scope;
$scope.pieces = pieces;
$scope.url = [];
for(var i = 0; i < pieces.length; i++){
$scope.url.push(pieces[i].image_URL);
}
}]);
You are loading the Social Plugins asynchronously, so you need to use FB.XFMBL.parse after loading them:
FB.XFBML.parse();
Source: https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse