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!
Related
I have searched but couldn't find an answer so I'm sure other Angular developers experience the same pain.
PhpStorm doesn't recognize the html tags inside a <script type="text/ng-template" id="editnode"> template and therefore I cant collapse anything inside it which can make life difficult for long pages.
Anybody know how to fix this?
Here's a screenshot:
Code folding doesn't currently work in script templates; please follow WEB-12164 for updates
How should I proceed when inserting app in a view.
I have a template document the has one app already to control page content. I want to insert other apps in the view. My first app is getting called in the html tag and it is controlling different sections of the page except the view.
Views are another html document that is loaded into a section. Can this other html file contain another app?
I have been trying with include but the app isn't working.
Exemple of code:
<!DOCTYPE html>
<html ng-app="mid" lang="fr">
<nav ng-controller="navCtrl"></nav>
<main><ng-view><ng-view></main>
<footer ng-controller="navCtrl"></footer>
My view would contain :
<div ng-app="my-second-app" ></div>
<div ng-controller="second-app-Ctrl"></div>
Would that work?
When you include your 'My view' to your example code you are nesting AngularJS applications. You can't include another app as view. AngularJS applications cannot be nested within each other.
take look here, and here
It is possible if you use the manual angular bootstrap function, but I find it hard to believe that this is what you want. You don't need to specify another ngapp in the injected view to let him know he is within angular context, he already knows that, anything below the original ng-app you specified is automatically in angular context.
Using another angular app within an angular app should only make things complicated and probably unnecessary especially if you are new to angular.
Any way keep it simple , try using the developers guide in http://angular.org , they should give you a sense of how to start.
It works fine when the page is opened normally but does not when its open as a modal. The expressions show up as literal text. Do I have to use the Angular Bootstrap UI? Does anyone have an example of how this is done? My modals are stored as partials
You need to use
http://angular-ui.github.io/bootstrap/
its simple to use, just include the javascript, a little CCS and angular.module('myModule', ['ui.bootstrap']);
Once added you have todo some things a different way, plenty of examples on the angular site. One of the main issue it solves is problems when href # is used.
This may not be the fix for you, but you should be using it. Do you have a plunk?
You need to add the Boostrap as a dependency to the angular Application,
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
and App,
angular.module('modalTest',['ui.bootstrap','dialogs'])
Here is an existing CodePen
As others have said, libraries exist to bring bootstrap into the angular world. Keep in mind, a lot of things are done differently when using them in how you set up your DOM. Bootstrap uses a lot of things in location.hash for controls, which conflicts with angular routing.
The issue is that when Bootstrap pops up a modal, angular has no idea that happened, and that it has a new part of the DOM to compile. If you don't want to pull in the angular bootstrap library (which is pretty good, and should be used if your starting a new page from scratch with the two), you can use $compile linked with a callback into angular (probably via a factory you make) to manually compile what you need.
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.
I recently reviewed the code for a webapp built with angular and found that it was written with the ng-app="myModule" directive placed on the <body> tag. When learning angular, I've only ever seen it used on the <html> tag, as recommended by the angular docs here, here, and in their tutorial.
I've explored this a bit on my own and found SO questions, notably this one and similarly this one, that discuss loading multiple modules for a page. However, this technique different from my case, as it involves placing ng-app on elements within the body and using manual bootstrapping to run two angular apps at the same time.
As far as I can tell, there is no difference at runtime between an app with ng-app on <html> or <body>. As I understand it, ng-app designates the root of an angular application, so placement of it on the <body> would cut <head> out of angular's scope, but I can't think of any major way this would affect things. So my question is: What are the technical difference between placing ng-app on one of these tags instead of the other?
There is no big difference where you put ng-app.
If you put it on <body> then you have a smaller scope for AngularJS which is slightly faster.
But I have used ng-app on the <html> for manipulating the <title>.
I was on a team working on a legacy app and found it best to use the ng-app tag in a div that is used as a wrapper to isolate new code from the legacy code.
We discovered this while working on the app that was heavily relying on jqGrid and Dojo.
When we added ng-app to the head tag it blew up the site, but when we used a wrapper we could use Angular with no problems.
AngularJS will bootstrap the first ng-app it finds! That's it. If you have more than one ng-app, it will only process the first one. If you want to bootstrap any other element use angular.bootstrap()
The value of the ng-app attribute is a module that have been created using:
angular.module("module_name", [])
A module defines how angular will bootstrapped because we do not have a main() method unlike other programming languages. If ng-app's value is empty, then it defaults to use 'ng', the default module.
It was said to be slightly faster because angular will process all of the elements inside the element where ng-app was. But I doubt slightly part because the difference will be hardly noticeable at all, unless you have a very very bulky DOM.
If you want examples here: http://noypi-linux.blogspot.com/2014/07/angularjs-tutorials-understanding.html