Probably there is some mistake from my end in handling the syntax and presentation in Angular.
This code is not working
http://plnkr.co/edit/sR3gqODKoqL6utxsXqQu?p=preview
Same code is working in this way
http://plnkr.co/edit/W3GQZaIu5vPFza7aBOA6?p=preview
Please check the script.js file there in the file where things are working properly the directive and app is all linked to each other an then where it isn't working I tried separating it which I must do in order to accommodate it in a separate view.
you have forgot var app ont top of script.js
var app = angular.module('myApp', ['smart-table']);
Related
I cannot include all the things I need an answer to the title, so here is what I concern:
Must a client side framework/lib be required when developing AEM ? If yes what is the best one fits to AEM and easy for development (Angular.js is just the way that I think it is "enough" good and easy for integration).
In case of using angular.js, I have some doubts:
Which is the most outter App (which is initialized with ng-app) and how We load it because AEM component is separated and I can not load most outter in any of them.
IMO, most outter ng-app will be loaded in the template (which is required by all the components, but it is just in theory (I'm not sure about that) and I do not see any example outhere show me how to load JS,CSS files on TEMPLATE creation (not component creation, just for clearly)
Alternative approach, each AEM component will be an separated angular module, and it will bootstraped manually (I'm not sure, too, please help to clarify)
Last but not least, If you have examples (enough complicated, not like hello world) or production project that used this stack (perfect !), please help to let me know, because my biggest concern is "is it possible to do".
Many many thanks in advance !
I am currently using angular JS with AEM successfully.
Which is the most outter App (which is initialized with ng-app) and how We load it because AEM component is separated and I can not load most outter in any of them.
ans: You can create a renderer component for this purpose and make it as an outer app then add the required clientlibs to it. after that you can use the renderers scope as a normal angular application.
IMO, most outter ng-app will be loaded in the template (which is required by all the components, but it is just in theory (I'm not sure about that) and I do not see any example outhere show me how to load JS,CSS files on TEMPLATE creation (not component creation, just for clearly)
ans: Rather than loading it in the template It will pretty easy to add it in the component as a client lib because everything like js / css in AEM we can add it as a client lib
Alternative approach, each AEM component will be an separated angular module, and it will bootstrapped manually (I'm not sure, too, please help to clarify)
ans: Yes you can create a component as an angular application and you can bootstrap it seperately
I have used Angular 1.x with AEM 6.x and created SPA (Single Page Application). Also, created AEM Screens App using Angular 1.x.
There could be many ways to do it, but I have followed the following approach :-
AEM Page template (body tag) with ng-app and added angular dependency for site (clientlib angular 1.x)
Define angular module in your site clientlib(JS) say module.js,
example: var app = angular.module('app', ['ui.router', 'ngAnimate','ui.bootstrap.tpls','ui.bootstrap.modal']);
You can also define state provider for different paths app.config(function ($stateProvider, $urlRouterProvider) {});
Define each component specific module/controller in a specific clientlib(js) file.
example (html): <div ng-controller="LoginCtrl" />
example (client lib(js)) - app.controller('LoginCtrl',
function ($scope) {});
I've spent a few hours on this now and I cannot crack it.
I'm trying to implement a great AngularJS example I found online into my app, while my front end up to now is fully normal JS.
I have installed the pipeline plugin and put the files in the respective folders:
http://i.imgur.com/cAPA6ui.png
AngularJS seems to be loading in correctly and in the right order, however in the dev tools it does say 'compile=false' after the js file name?
See: http://i.imgur.com/qHEWwc9.png
I tried to redirect to the new AngularJS page when I click into one of my current views, I thought that the following code was going to do so:
app.config(['$routeProvider', function($routeProvider) {
//$locationProvider.html5Mode(true);
$routeProvider
.when('/view', {
templateUrl: 'assets/index.html'
})
So is it possible to use both AngularJS and regular JS in my application?
And if so, how do I go about moving from a JS to an AngularJS page?
Any assistance is greatly appreciated.
Just go to url http://localhost:8080/#/view But if you enable html5Mode then to view it simply go to http://localhost:8080/view
I used this code as localhost so that's not the problem.
Used pastebin because this editor was breaking my code for about 10 minutes...
main.js -> http://pastebin.com/gePdrETv
index.html -> http://pastebin.com/ehDCyqN6
route2.html -> http://pastebin.com/4s2gtY4j
route1.html -> http://pastebin.com/RDAGQKPv
I am trying to change the view in index.html in ng-view so that I could see different views (/ change views). But it's not working at all (not even a data bind is working, just showing me the {{ message }})
Thanks in advance.
I think you need to include the following JS as well.
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-route.js
This is for Angular 1.4.9.
The module ngRoute is defined in this separate JS file, so your Angular application can't even bootstrap I think.
Check your console output, I think you'll see an $injector:modulerr there.
See the documentation which specifically mentions ngRoute.
We have a legacy framework that we're looking to be able to do some major updates to soon. As part of this, we're working at bringing all our library files up to date. During this process, we upgraded angularjs from 1.0.7 to 1.3.13. Suddenly, we're getting a show-stopping error.
Error: [ng:areq] http://errors.angularjs.org/1.3.13/ng/areq?p0=MainCtrl&p1=not%20a%20function%2C%20got%20undefined
The question is: Why does this error happen when we upgrade to the newest library, and how am I supposed to do this now? I will add the most relevant lines of code below, and I can add more as requested, but it's kind of complex and I'm not sure how to break it down to something easy to stick into here.
The error occurs at angular.boostrap() The relevant code shows like so:
angular.module('app',['DataTools','ClientDataTools']);
angular.bootstrap(document, ['app']);
Main Ctrl is defined as such:
function MainCtrl($scope, $compile) {
The file structure is as such:
load.js
run.js
dataTools.js
load / controllers.js
load / config.js
load / ClientDataTools.js
load / libraries.html
The automatically generated html loads up along with the js code found in load.js. This first thing it does is load up libraries.html, which contains the imports for run.js, dataTools.js, controllers.js, and ClintDataTools.js. The code in load.js then calls a function defined in run.js. This function loads config.js and applies the settings there while going through and using jQuery to add angular tags to the form found in the automatically generated html. It then runs the angular.module() and angular.bootstrap() commands.
controllers.js holds the MainCtrl declaration. config.js is just a json string. dataTools.js and ClientDataTools.js holds the directives used by the angular - this error still happens even when removing the directive files, so I don't think they're part of it, but they are included here out of completeness of the issue..
And no, I can't just change the html in the form in the first place. I don't have access to it. It's automatically generated html to which we wish to add intelligent behavior like preventative data checking. It's an automatically generated form that we'd like to work a little more responsively. Please don't recommend just putting the angularjs markup into the html, and please don't ask why we can't touch the original html.
The way of declaring controller with
function MyCtrl() {}
has been deprecated - try declaring like
angular.module("app").controller("MyCtrl", function() {})
hope things are going well.
I'm attempting to setup my development environment to be able to effectively follow the AngularJS tutorials on http://egghead.io/. I've followed the tutorial on http://docs.angularjs.org/tutorial and have since then been playing around with the angular-seed skeleton. I have successfully set up the angular-seed skeleton and am able to fully run it.
When I attempt to create js files with functions, such as the one in video 2. I'm not able to properly bind it to html element on index.html. I believe the issue may be with how routing is implemented in the angular-seed. I have node.js installed and am able to start the web server from the scripts folder in the angular-seed.
I'm really excited to begin working with AngularJS after I had the opportunity to work with ASP.NET MVC 4. I really like the information John provides in the tutorials on egghead.io, but I'm currently unable to fully emulate his instructions. It looks like he is JetBrains WebStorm, but I have no interest in purchasing it, if possible.
Any help would greatly be appreciated.
Thanks!
Edit 1:
For Example. In video 2 on the egghead.io tutorials. He creates a js file called main.js where he put a customer function and refers to it as an angular controller in index.html:
function FirstCtrl($scope){
$scope.data = {message: "Hello"};
}
Wouldn't a controller need something to exent of:
angualar.module('myApp',[]).controller('FirstCtrl', function(...){});
For angular to have it work as a controller on index.html? I'm able to add some of these functions to controllers.js of the angular-seed and make them work to some extent. Would it best to perhaps still use angular-seed and put the controllers/model/etc he displays some way into it's structure?
I ended up using angular-seed and placing the controllers/services/etc he is creating into controller.js for the first few videos. I was able to successfully output the correct information he is displaying in the videos. By the end of video 5, my code in controllers.js looked something like this:
'use strict';
/* Controllers */
var myApp = angular.module('myApp', []);
myApp.factory('Data', function(){
return {message:"I'm data from a service"}
})
myApp.controller('FirstCtrl', function FirstCtrl($scope, Data){
$scope.data = Data;
});
myApp.controller('SecondCtrl', function SecondCtrl($scope, Data){
$scope.data = Data;
$scope.reversedMessage = function (message) {
return message.split("").reverse().join("");
}
});
At first I was using sublime text 2 and command line (node.js expressjs server), but recently I started using Visual Studio and created an empty website. I transferred all the folders/files of angular-seed into the website structure and I longer need to run node.js expressJS from the scripts\web-server.js. VS2013 has angularJS auto-complete features so it makes it easier.
I really like his tutorials and I'm glad I'm now able to successfully follow them to start learning angularJS.
Thanks!