I have recently started using angularjs and understand the basics. I have a project separated into separate angularjs apps - for example an account app, a mail app, a news app, etc. Each of these apps are its own angular module.
Now if I were to add a notification app and I wanted that notification app to run on every page in tandem with my other app for that specific page how should I architect my modules to do so?
*My main concern is that angular only allows for one ng-view so I cannot create one for my main app for that page and another for the notifications.
While each app currently only supports one ng-view, you can manually bootstrap as many applications as you want (each with its own ng-view) to different elements in the page with something like this:
angular.bootstrap(document.getElementById('main_container'), ['my-app']);
We combine it with jQuery to be able to know when it's been bootstrapped, and to add in an ng-controller as well:
$(function () {
$('#main_container').attr('ng-controller', 'MainCtrl')
$.when(angular.bootstrap(document.getElementById('main_container'), ['my-app'])).done( function() {
$('body').show()
})
});
If you want to communicate between apps, then you need to do it with Angular's version of window: $window and events or a service as explained here: Share a single service between multiple angular.js apps
As Angular documentation says.
The directive designates the root of the application and is typically
placed at the root of the page....ngApp is the easiest way to
bootstrap an application.
An angular app defines it's module but it can have dependency on other modules too. So your example for notification is a module dependency not a app dependency.
You would create module for notification like
var notificationModule=angular.module('notification', []);
and register multiple sub elements like controllers, directives, filters, services etc.
You would then add this module as dependency into other modules such as
var customerModule=angular.module('customer', ['notification']);
You can register the notification dependency with any module not just the module linked to ng-app.
You html structure should be such that the main view is contained in ng-view and the ancillary view are included using ng-include directive. Since ng-include src property supports data binding you can swap the templates used with ng-include when the main ng-view content changes.
Related
I would like to know if there is a way to take the build files from an angular app and add it as part of another angular dist folder and launch that app inside a div in the parent app.
Basically the micro frontend architecture.
I have looking at options like using window object and customising the main.ts or the index.html, but none of them seem to help.
Does this other HTML page have angular included if so you can simply use the ng-include directive.
If not your best bet is iframe which is suboptimal
My question is regarding How angularJS Module work
I have made a small bunch of code using AngularJS and I cannot understand the following things.
Include angular js but not register module
I included angularJS but never registered with the module. it gives me wrong output.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myapp">
<div>
<p>{{1+2}}</p>
</div>
</body>
include angularJS and register with module
Now, When I registered the angular application with the module. it runs and gives correct output.
var app = angular.module('myapp', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myapp">
<div>
<p>{{1+2}}</p>
</div>
</body>
My questions are...
How angular Works with the module?
Do I need to register it every time with my module?
What is the deep concept of AngularJS module?
What is a Module?
You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc.
Why?
Most applications have a main method that instantiates and wires together the different parts of the application.
AngularJS apps don't have a main method. Instead modules declaratively specify how an application should be bootstrapped. There are several advantages to this approach:
The declarative process is easier to understand.
You can package code as reusable modules.
The modules can be loaded in any order (or even in parallel) because
modules delay execution.
Unit tests only have to load relevant modules, which keeps them fast.
End-to-end tests can use modules to override configuration.
More on angular module
AngularJs is pretty awesome. I just started learning it last Monday. It's not too difficult to pick up basic concepts, but admittedly my only experience so far is to create a bootstrap menu from the results of an API call.
For your specific questions:
You create the app in a separate js file then you load it in your html as a script. For example you create a file in a subdirectory to your index.html, /src/myTestApp.js, then you load it in your index.html using (can't seem to escape to code here... )script src="/src/myTestApp.js">
So basically,
var app = angular.module('myapp', []);
initializes the base AngularJs module which you have called app.
You need to register every module that you would need, but after that you can call it anytime if it's in the same $scope. I think this is called dependency injection.
AngularJs is a JavaScript framework for front-end web development. It does especially well at creating single page applications (SPA). It uses the Model View Controller concept, where you separate the different layers of the code for better management/workflow. It has two-way data binding and a whole bunch of built in html directives that makes it very seamless to pull data from your model, pass it to your controller and display it on your view.
There's many more but these reasons I listed are the main reason I'm getting into it. It exactly fits the specifications and requirements I have for my next project.
I'm pretty new with angularJs. Currently I'm developing a one-page website with laravel framework.
Currently I have only one ngView, where i put my home page codes, but the issues is that all components like sliders, gallery is not working when i put them in a view file. After some searches I found out a module called ocLazyLoad. Modules are loading but sometimes other scripts are loading before jQuery and website again doesn't display the components.
Is there any way to force Loader or Angular to load scripts first and then display view ?
.run(function($rootScope, $state, $ocLazyLoad) {
$ocLazyLoad.load({
name: 'authApp',
files: ['style/js/jquery.min.js',
'style/js/bootstrap.min.js',
'style/js/googlemap.js',
'style/js/twitter-bootstrap-hover-dropdown.min.js',
'style/js/jquery.themepunch.plugins.min.js',
'style/js/jquery.themepunch.revolution.min.js',
'style/js/jquery.easytabs.min.js',
'style/js/owl.carousel.min.js',
'style/js/jquery.isotope.min.js',
'style/js/jquery.fitvids.js',
'style/js/jquery.fancybox.pack.js',
'style/js/fancybox/helpers/jquery.fancybox-thumbs.js?v=1.0.2',
'style/js/fancybox/helpers/jquery.fancybox-media.js?v=1.0.0',
'style/js/jquery.slickforms.js',
'style/js/instafeed.min.js',
'style/js/retina.js',
'style/js/google-code-prettify/prettify.js',
'style/js/scripts.js']
});
I'm loading everything in module.run() function.
I would recommend to use RequireJs instead of ocLazyLoader for this kind of problems.
RequireJs allows you to choose which library has to be loaded first according to its own dependency.
For example if you are using a jQuery plugin you know that it will needs jQuery to work properly, so you will load this plugin with jQuery as a dependency and RequireJs will load everything in the right order.
I have an existing angular / phonegap app that I'm trying to port to a windows metro app for win8. I've replaced my jQuery with a metro specific version and I've wrapped each angular module in the MSAp.execUnsafeLocalFunction method and I'm getting the application to sort of compile.
What is happening is that the page is built using angular ui router, so I'm able to see the dynamically created page, with angular ui router combining the 3 or 4 partials based on the route. However, when Angular starts to go through ng-bind, ng-repeat, etc... I'm getting the following error, "JavaScript runtime error: Unable to add dynamic content. A script attempted to inject dynamic content, or elements previously modified dynamically, the might be unsafe..."
I've looked to see how others have overcome this issue, but I have not found anything that works. I'm worried that what I'm doing is going to have force me to rewrite the application using the WinJS library.
Does anyone have any resources or experience that can help me with this?
What works for me is adding the ng-csp directive to the HTML tag. This disables some of the dynamic content stuff of Angular. I didn't even wrap anything in exeUnsafeLocaFunction. I'm not sure if it will work on Angular UI Router though...
More on the ng-csp directive here...
I have an application with multiple Backbone models / views. I'm running into an issue where the application tries to load all of the scripts on every page, however I only need them to load on specific pages.
What is the correct way to address this? Should I use a router?
First you have to organize your application code into small modules (require.js). Here is a brief introduction Organize your backbone application using modules. Load only modules that are required in current page. For details about requirejs requirejs.
You can use routers in combination to decide which modules of your application to load.