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
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"]);
not sure what I have wrong here but the data doesn't display with this code and the only error I get is an XML Reading error XML in booksincategory.html , any ideas? Thanks
**booksincategory.html **
<div class="category col" ng-repeat="book in detail">
<h3 class="title">{{book.title}}</h3>
</div>
controller
app.controller('BookCategoryController', ['$scope', 'bookcategories', '$routeParams', function($scope, bookcategories, $routeParams) {
bookcategories.getAllBooks($scope.id).then(function(response) {
$scope.detail = response.data.books[$routeParams.categoryId];
});
}]);
service
app.service('bookcategories', ['$http', function($http) {
return {
getAllBooks: function(id) {
return $http.get('http://52.41.65.211:8028/api/v1/categories/'+ id + '/books.json')
}
}
}]);
app.js
var app = angular.module('ReaderApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/categories/:categoryId', {
controller: 'BookCategoryController',
templateUrl: 'views/booksincategory.html'
})
.otherwise({
redirectTo: '/books'
});
});
index.html
<div class="main">
<div class="container">
<div ng-view></div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/BookCategoryController.js"></script>
<!-- Services -->
<script src="js/services/bookcategories.js"></script>
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
Having a $injector:modulerr error after including ngRoute. Using AngularJS 1.2.26
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when('/', {controller: indexController1, templateURL: 'index1.html'});
$routeProvider.when('/view/:id', {controller: indexController2, templateURL: 'index2.html'});
$routeProvider.otherwise({redirectTo: '/'});
});
app.controller('indexController1', function ($scope) { .... }
app.controller('indexController2', function ($scope, $routeParams) { .... }
html template
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.min.js"></script>
<script src="app.js">
</head>
<body>
<div ng-view></div>
</body>
</html>
There are some problems in your code:
The .config
You should use nested .when instead of again define $routeProvider
Name of the controllers between quotes
Missing closing ); in controllers
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'index1.html',
controller: 'indexController1'
})
.when('/view/:id', {
templateUrl: 'index2.html',
controller: 'indexController2'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('indexController1', function ($scope) {
});
app.controller('indexController2', function ($scope, $routeParams) {
});
The html
Missing </script> close tag.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.min.js"></script>
<script src="app.js"></script>
Check here a working example ngRoute
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