I am designing a page in angularjs that would be a mini SPA (single page app). This page is part of a larger web site that was written in traditional jquery and asp.net. The page will have 2 main sections - the 1st section is just some simple data elements that can be bound easily with ng-model's. The 2nd section will be dynamically generated based on user's interaction, and the data will be retrieved through ajax ($http or $resource).
So should I have ng-view on the whole content page that contains the 2 sections? Or should I only do ng-view on the 2nd dynamic sections? If it's better to have ng-view on the 2nd section only, how do I handle the routes in this case knowing that the 1st section's data should be preserved statically?
thanks.
You don't have to use ng-view and routes for your simple case (widget-like angular application inside other application). You can use ng-include instead. Here is an example of application. I prefer this approach because it does not require to use shared resource like URL location hash that may be already in a use by legacy application or other widgets. Application below switch views dynamically, loads different data for each view and affects it's display options (number of displayed items):
HTML
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="angular.js#*" data-semver="1.2.11" src="http://code.angularjs.org/1.2.11/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Here is my legacy app markup</h1>
<div ng-app="app" ng-controller="appController">
<div>
<input placeholder="Number of items" ng-model="numberOfItems"/><br/>
<select placeholder="View" ng-model="currentView" ng-options="view.name for view in views"></select>
</div>
<div ng-include="currentView.url"></div>
</div>
<div id="jqueryContainer">And here is some markup generated with jQuery<br /></div>
</body>
</html>
JavaScript
angular.module('app', []).
controller('appController', function($scope, $http) {
$scope.views = [{
name: 'view1',
url: 'view1.html',
dataUrl: 'data1.json'
}, {
name: 'view2',
url: 'view2.html',
dataUrl: 'data2.json'
}];
$scope.numberOfItems = 2;
$scope.currentView = $scope.views[0];
$scope.$watch('currentView', function(currentView) {
if(currentView && currentView.dataUrl) {
$http.get(currentView.dataUrl).success(function(data) {
$scope.data = data;
});
}
});
});
$(function(){
$('#jqueryContainer').append('<span>Some markup generated dynamically.</span>');
});
view1.html
<div>
<h2>View1 specific markup {{data.length}}</h2>
<ul>
<li ng-repeat="item in data | limitTo:numberOfItems">{{item.text}}</li>
</ul>
</div>
data1.json
[{"text":"Text1"},{"text":"Text2"},{"text":"Text3"},{"text":"Text4"},{"text":"Text5"}]
Plunker: http://plnkr.co/edit/Y5IZmPbrrO63YrL8uCkc?p=preview
You can also find useful examples of this approach in AngularJS documentation: http://docs.angularjs.org/api/ng.directive:ngInclude
yes you can separate the static view with the dynamic view, in actual this is what angularjs suggest.It is not required to move the scope of ng-app.
so you can do like this: menu is displayed as the static part
index.html
<body ng-app>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-view></div>
</body>
in your config file you can include your routing which page routes to which page and which controller to used on loading of any view.
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
Related
Good Day,
I'm trying to create an SPA with Angular. Here is my index.html page:
<!DOCTYPE html>
<html lang="en" ng-app="onlineApp">
<head>
<meta charset="UTF-8">
<title>Online</title>
<link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/mystyle.css">
<base href="/Client/">
</head>
<body ng-controller="mainController">
<div class="container"> <!--- This is the box login -->
<div ng-view></div>
</div>
<script src="components/angular/angular.js"></script>
<script src="components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
</body>
</html>
and here is app.js:
var onlineApp = angular.module('onlineApp', ['ngRoute']);
onlineApp.controller('mainController', function($scope) {
$scope.message = 'Test Message';
});
onlineApp.controller('signupController', function($scope) {
$scope.message = 'Sign up Message';
});
onlineApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
})
.when('/signup', {
templateUrl: 'pages/signup.html',
controller: 'signupController'
})
.otherwise({
redirectTo: '/'
});
// use the HTML 5 History API
$locationProvider.html5Mode(true);
});
My problem is: Inside the contents of the ng-view (home.html), I have a button. When I click the button, I want to go to a signup page as defined in the route handler and it's not working. I think the problem is "inside" the ng-view.
EDIT:
Here's a snippet of pages/home.html:
<div class="pull-right col-md-4">
<label class="pull-right col-md-12 create-monthly">Create a Monthly Parker Account</label>
<a id="btn-create" class="btn btn-primary" href="#signup" >
Create Account
</a>
</div>
When I click on the button, I want the contents of pages/home.html to be replaced with the contents of pages/signup.html
END EDIT:
All of the examples I see of ng-view being used is when the links are outside of the ng-view.
Can I change the contents of ng-view while I'm inside the ng-view itself? Or is there some sort of project that would allow me to do that.
TIA,
coson
you just have to change the location of the browser to change the route. i do not really understand your problem, probably you will have to rephrase it or post a little bit more code (from inside your ng-view)
potentially either a link of the form
Click me to switch
or a manual location change with the $location service (inject it to your controller)
$location.path("/signup");
should do the job. im not sure what you mean by links inside and outside of ng-view.
The nice thing about using ui-router is that you can treat your view changes as simple page redirects. i.e. you can use an anchor tag to redirect the browser to the specified url and ui-router will catch that before the page refreshes and just update your ui-view without refreshing the page.
Click this link to go to signup.
I am new to angularjs ,i make a sample app with custom directives now i add routing as well but it doesn't working.When i start project index file is loaded in browser that is working fine but when i click on nav bar links then about and contact page is not displayed it's remains on index.html.
here is my index.html:
<html ng-app="myApp">
<head>
<title>Reddit New World News (Task)</title>
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<script src="angular/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.min.js"></script>
<script src="myApp.js"></script>
<script src="myAppCtrl.js"></script>
<script src="headerDirective.js"></script>
<script src="searchDirective.js"></script>
<script src="myDataDirective.js"></script>
<!-- start menu -->
</head>
<body>
<div header-table></div>
<div class="content" ng-controller = "myAppCtrl">
<div class="container" >
<div ng-view></div>
</div>
</div>
</body>
</html>
myAppCtrl:
// TODO: Wrap in anonymous function
(function () {
var myApp = angular.module('myApp', ['ngRoute']);
// configure our routes
myApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'code/index.html',
controller : 'myAppCtrl'
})
// route for the about page
.when('/about', {
templateUrl : 'code/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'code/contact.html',
controller : 'contactController'
});
});
// TODO: min-safe with bracket notation
myApp.controller('myAppCtrl', ['$scope', '$http', function($scope, $http) {
$scope.sortType = '';
$scope.sortReverse = true;
// TODO: Keep lines short - it's easier to read
$http.get("https://www.reddit.com/r/worldnews/new.json")
.success(function (response) {
$scope.stories = response.data.children;
});
}]);
myAppCtrl.controller('aboutController',function(){
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
myAppCtrl.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
})();
headerDirective.html:
<div class="top-header"></div>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="header">
<h1>Reddit</h1>
</div>
<div class="header-right">
<h2>World's Latest News</h2>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="clearfix"></div>
</div>
any guide thanks.
Like some people allready mentioned, you should deffinitly read the docs and probably watch some tutorials. I'm trying to see what you are doing, but it's not clear to me.
But I think I see where it goes wrong in your thoughts:
You have 3 'templates' index.html, about.html and contact.html. In your config You use them in your routing. By watching your files my guess is that you are expecting that, depending on the route, these html-files will be loaded. Just like when redirecting to that page.
What you should do is make a index.html with the html You use on every page. this can be the <head></head> only, but can also contain your header with navigation and footer. Then you use <ng-view></ng-view> or <div ng-view></div> where you want the templates to load in your page. These templates don't need to contain the parts you allready defined in your index.html. You have only the content in it.
So, a simple example:
index.html
<html>
<head>
//loading your scripts etc.
</head>
<body>
<ng-view></ng-view>
</body>
</html>
Than, instead of creating a template called index.html, you make a template home.html with the content:
<div class="container">
<h1>My Home</h1>
</div>
Now the contentpart from your home.html will load in your index.html where you define de ng-view.
An other thing I noticed is the path you define in templateUrl. You define the location as code/about.html. You have to give it the path from your index.html (the main html) In your case that will just be templateUrl: 'about.html'.
I would suggest putting the different files in different folders. So, one for your templates, one for your js-files (probably a js-folder with another folder in it for your js-file with directives etc.).
I hope this will help you on your way. But deffinitly read the docs and watch some tutorials. It will help you a lot.
I was setting up a very basic AngularJS + Ionic app, and encountered a weird case where despite the ng-repeat working properly (e.g repeating the correct number of times), the variables weren't rendered on the DOM. Additionally, I saw this weird behavior only happening in my local app, but working properly on an exact copy on Plunker.
On app.js I have:
angular.module('sleepExpertChatApp', [
'ionic',
])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('peoplelist', {
url: '/peoplelist',
templateUrl: 'templates/people-list.html',
controller: 'PeopleListCtrl'
});
$urlRouterProvider.otherwise('/peoplelist');
})
.controller('PeopleListCtrl', function($scope){
$scope.obj = {}
$scope.test = "Mytestvar"
$scope.obj.people = [{name:"leon"},{name:"jeff"},{name:"leon"}];
console.log($scope.obj);
});
And my html:
<!DOCTYPE html>
<html ng-app="sleepExpertChatApp">
<head>
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.1.1/angularfire.min.js"></script>
<script src="/static/chat/main.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.0.0/css/ionic.min.css">
</head>
<body>
<ion-nav-view></ion-nav-view>
<script id="templates/people-list.html" type="text/ng-template">
<ion-view id="userMessagesView"
view-title="People">
afsdf
<ion-content>
<div ng-repeat="person in obj.people">
<div class="item">
{{person.name}}
</div>
</div>
</ion-content>
</ion-view>
</script>
</body>
</html>
This is the Plunker: http://plnkr.co/edit/UV3AJoEFpUeE45DkVv9A
Locally, the simple ng-repeat does produce the right number of elements, but when trying to evaluate the expression to display the variables, nothing is shown. See the below screenshot and notice that there are 3 divs with class item, as expected, but they have no name.
Any ideas what could be going wrong in this seemingly trivial set up?
Ah! I didn't realize I was serving the HTML from a Django server, and so Django's template rendering engine was clashing with AngularJS's.
Simply wrapping my HTML with Django's {% verbatim %} tag fixed my problem.
I am using angularJS in my grails application. Before that, i tried a sample from internet. I tried to use angularJS $routeProvider for the partial views in my main view. My workflows are as follows:
my main view is index.gsp:
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routing example</title>
</head>
<body ng-app="routeApplication">
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
<li> Add </li>
<li> Show </li>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
</div>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/app.js"></script>
</body>
</html>
My partial views are: add_order.gsp and show_orders.gsp to show a sample message for each view.
my app.js is as follows:
var sampleApp = angular.module('routeApplication', ['ngRoute']);
sampleApp.config(['$routeProvider',
function($routeProvider) {
var base = '${request.contextPath}';
$routeProvider.
when('/AddNewOrder', {
templateUrl: 'templates/add_order.html',
controller: 'AddOrderController'
}).
when('/ShowOrders', {
templateUrl: 'templates/show_orders.gsp',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/AddNewOrder'
});
}]);
sampleApp.controller('AddOrderController', function($scope) {
$scope.message = 'This is Add new order screen';
});
sampleApp.controller('ShowOrdersController', function($scope) {
$scope.message = 'This is Show orders screen';
});
Note: i created a templates folder and placed my parital views on that.
This problem is that, whenever i click to load my partial views it shows
`http://localhost/angularJSrouting/templates/show_orders.gsp`
404 Not Found
Am i missing something or is there any problem of placing the partial views?
I don't think this will work. Since your templateUrl is templates/show_orders.gsp angularjs will try to find that file inside templates folder in your webapp.
You have to redirect to
http://localhost/#/angularJSrouting/templates/show_orders.gsp url
can you use '/' instead of '#' in those html line
<li> Add </li>
<li> Show </li>
Inside my AngularJS app index.html page I have three main divs (top, footer and ) which display different views depending on current route. The problem I am facing now is that I need to display some data in the footer area, including data that will require loop (ex. list of States, Cities...etc) but I am not sure how to display data in index.html outside of the ng-view. So can someone tell me how this can be accomplished? Any example code is highly appreciated. Thanks
Below is my index.html structure, App.js
app.js
var myApp = angular.module('myApp', ['ngRoute', 'ngSanitize']);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/',
{ templateUrl: 'templates/home.html',
controller: 'HController',
title: 'Home',
});
}]);
Index.html
<html lang="en" ng-app="myApp">
<head>...</head>
<div id="header">....</div>
<div ng-view></div>
<div id="header">
<!-- Here is where I need to loop to display data -->
</div>
Using ngRoute and ng-view does not preclude using ng-controller and other angular constructs in your code as long as the code resides inside an element which has ng-app attribute (or has been bootstrapped).
So, since you have ng-app attribute on html, you can define a new controller and use it in #header:
index.html:
<div id="header" ng-controller="headerController">
{{myData}}
<!-- Here is where I need to loop to display data -->
</div>
app.js:
myApp.controller('headerController',
[ '$scope', function ($scope) {
$scope.myData = 'Stuff.';
}]
);