I am looking for some guidance with creating an AngularJs multi-page app served by a Laravel Backend. All web app tutorials on the net point to creating SPAs and I am just getting started with Angular - so please go easy on me.
ProductPage example - http://example.com/products/widget
<html data-ng-app='ExampleApp'>
<head>
</head>
<body data-ng-controller='ProductController'>
// ProductPage Content Served by laravel with angular tags
<script type="text/javascript" src="/js/lib/angular.min.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src="/js/controllers/ProductController.js"></script>
</body>
</html>
CartPage Example - http://example.com/cart
<html>
<head>
</head>
<body data-ng-controller='CartController'>
// CartPage Content Served by web-server with angular tags
<script type="text/javascript" src="/js/lib/angular.min.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src="/js/controllers/CartController.js"></script>
</body>
</html>
So in the above examples, I have created two pages, which are served by the web server with pretty much all static content. But the pages have been marked up with angular tags. On each static page, I have referenced a different AngularJS controller.
Is this the right way of tackling the problem or should I be allowing app.js to load up the controllers / inject the dependencies?
Also, any guidance on sharing data between controllers in this multi-page app and links to decent resources / examples would be really helpful. e.g Would I need to pass e.g. Items added to shopping cart to an api from the product page, then query this api again to retrieve the cart contents?
You should include the ngRoute module and let AngularJS load the controllers for you. Please refer to AngularJS docs to find out how to work with routings.
As for sharing data between controllers, services are what you're looking for. Creating a service is as easy as this:
app.factory("ServiceName", [function() {
return {
somevar: "foo"
};
}]);
Then, in your controllers, you inject the service like this:
app.controller("ContactCtrl", ["$scope", "ServiceName", function($scope, svc) {
$scope.somevar = svc.somevar;
}]);
The service's state is retained for as long as you don't cause a physical page reload (which is why you should use ngRoute to load your controllers).
Here you can use ngroute directive with assigning controller name dynamically.
If we use ngroute , then ngroute $scope is parent scope for both pages(html views).
Form this scope you can easily pass data from one controller to other controller.
Probably the best boilerplate/template system that I have found is Yeoman. It has a large number of great Angular templates that you can use as a starting point, and also supports automatically creating models, views, etc. from subtemplates of the main template that you choose.
Take a look at the Yeoman Angular generator, it's one of the more well-maintained angular templates that will give you a good feel for the capabilities of using a Yeoman generator.
I've worked with ngSeed for the past two years now. When it got updated to use $state it felt like a decent way to do larger apps with Angular.
Things to remember:
modularize around functionals (not layers like most tutorials do),
keep your modules small and clean,
never use $rootScope,
encapsulate shared state in a service,
don't broadcast events, but watch state,
…
Check out fountainjs. They have good boilerplates for different UI technologies.
I put a basic angular multipage boilerplate on github. It covers a working example of ngRoute and the loading of html partials and images. There's also an angular button in one of the partials that logs a message to the console. Hope it helps
https://github.com/PrimeLens/angular-multipage-boilerplate
edit: there is a controller that encompasses all pages to hold data that you might want to pass from page to page.
Related
In Notepad++ tools Angular Routing does not working.
I Tried to Link all angular links
Scotch Tutorials
Above Tutorial Link Working in Online,But does not working in Notepad++.
From the comments you've provided it's because you've used;
<body ng-controller="mainController">
You need to specify the angular App instead like so;
<body ng-app="scotchApp">
This makes sure your index page uses the module App, rather than explicitly the controller.
Hope it helps!
I've a Backbone application, which initialises from index.html. I tried adding new amp html called index.amp.html and followed instructions in Create Your AMP HTML Page.
My index.html has only hook to require js to start loading backbone app. All the html is generated dynamically.
Is there a way I can include AMP practices in dynamic generated HTML? Because all I have is one index.html entire content is generated through handlebars dynamically on client side.
I didn't find any good article to make SPAs to support AMP. Are there any best practices to follow? Please help me out.
At this time, the only JavaScripts that can be triggered in an AMP document are these two scripts:
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
You can use a mustache template as part of the custom-element script as follows:
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
The templates are described here:
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-templates.md
Without access to your code, can't say how easy or difficult it may be to modify your handlebar templates to fit the model above.
As we know, angular is a good MVC framework to build your application with single page, but I'm afraid that if taking too much work in one page, will it be a problem to load lots of javascript libs in index.html? some issue like loading slowly or even performance/network issue.
As my demo below, there's lots of js libs, and about the 'test/restful/restful.js', I want to load it when my router goes to restful.html, but I need to declare the controller in router, in index.html, otherwise the 'RestfulCtrl' cannot be recognized by angular lifecycle, so how to separate resources to reduce the work of index.html, or it is the common defect of single page MVC
The size of your controller is tiny compared to the size of all the libraries (jquery, angular, etc.) you're already loading. Having one HTTP request for each and every controller or service JS file is obviously not a good idea, but you should simply concatenate and minify those at build time, and have a single JS file to load that contains your whole application. So
<script src="app.js"></script>
<script src="FirstCtrl.js"></script>
<script src="SecondCtrl.js"></script>
<script src="FirstService.js"></script>
<script src="SecondService.js"></script>
should become
<script src="myCompleteApp.min.js"></script>
You can also choose to concatenate all the libraries and your own minified application into a single big file if you prefer, which would allow loading a single big JS file containing everything, in a single HTTP request.
Grunt and Gulp are the two main tools used to do that.
I am doing a project that uses AngularJS. I have created partial pages where each page has its own, different controller.
Site Structure
/ProjectRoot
/css
/js
angular.js
jquery.js
/partials
login.html
page1.html
index.html
index.html
<!DOCTYPE html>
<html ng-app="demoapp" >
<head>
scripts
</head>
<body ng-controller="maincontroller">
<ng-view></ng-view>
</body>
</html>
login.html
<div class="main-page" ng-controller="logincontroller">
--code---
</div>
So the full login page is rendered as:
<!DOCTYPE html>
<html ng-app="demoapp" >
<head>
scripts
</head>
<body ng-controller="maincontroller">
<div class="main-page" ng-controller="logincontroller">
--code---
</div>
</body>
</html>
I need to share data between the controllers. I tried using $scope.$parent.variablename but when I refresh page1.html it contains a blank value.
My questions are:
How do I create global variables which I can use throughout the project, that is with all partial pages and their controllers (perhaps $rootScope)?
Is the use of a cache is better option or not? (security concern)
To share state between controllers you should use an Angular service. Services are easy to define and use (see example below) and since they are singletons they are a great place to store shared state information. No need for caches or anything complex.
But then you also said:
I tried using $scope.$parent.variablename but when I refresh
page1.html it contains a blank value.
Refreshing an Angular app is always going to be a problem.
This is because your typical Angular app is a Single Page Application (SPA). Your state information persists only as long as the lifetime of the app, which for an SPA is the lifetime of the page. Thus, if you refresh the page then you restart the application and all your state information is lost.
To solve this problem you can use sessionStorage. This technology is well supported across browsers and allows you to persist your state data between page refreshes. This is especially important in Angular apps because they should always gracefully support the user refreshing the page (which includes clicking on the back and forward buttons).
You can combine all this into a simple service that persists its data into sessionStorage. This gives you state data that is shared between controllers and persisted between page refreshes.
Here is an example (in coffeescript) that stores a state datum called userToken:
Service
angular
.module 'app'
.service 'storageService', StorageService
class StorageService
setStorage:(key, value)->
json = if value is undefined then null else JSON.stringify value
sessionStorage.setItem key, json
getStorage:(key)->
JSON.parse sessionStorage.getItem key
userToken:(value=null)->
if value is null
#getStorage 'userToken'
else
#setStorage 'userToken', value
You can add as many data values to this service as you like, you can even store complex objects
Once you have defined a service you can use Angular's dependency injection to easily get hold of the service instance. Here are a couple of example controllers that show the storageService being injected and used:
Controller
angular
.module 'app'
.controller 'logincontroller', ($scope, storageService)->
$scope.setUserToken = (token)-> storageService.userToken(token)
.controller 'maincontroller', ($scope, storageService)->
$scope.userToken = storageService.userToken()
I am working on a backbone app that we want to migrate over to angular. However, a true "port" or "rewrite" is not an option due to resource constraints. Instead, we want to introduce angular into the app in a modular sort of way -- ie, identify and carve off easily separatable functionality and make it angular, as well as introduce any new modules (i.e. an admin module) as angular code.
Is this possible? If so: a) Where would you put your "ng-view" tag? Inside the div that you currently render your backbone-based markup? b) How do you introduce angular-routes into all of this?
You can add target="_self" for all the backbone links, then angular would not route those links. We had the same problem and adding this fixed the problem. Hope this helps..
Test
You can use angular in any place you want in your app and use it with backbone if you want but stay in mind that you're using two frameworks and in this case it's totally unnecessary and wrong, but i think that you don't have choice, all you have todo is put the directive "ng-app" where you want to use angular, here is my example:
<html ng-app="myModule">
//your code here
</html>
and the script(like any other angularjs app):
var app = angular.module('myModule', []);
// the rest of the code
I never tested before angularjs + backbone, but i think you can have some problems like to deal with data from server, who will gonna do that? Angular or Backbone?