I'm coming from a LAMP background, and as a learning project I downloaded MEAN.JS so I can dive into the MEAN stack. I got the whole thing running, but I feel like I'm missing something...
I followed all of the steps at http://meanjs.org/generator.html, got Mongo running, got my server running, etc. My index.html file loads on localhost:3000 and life is good.
So in my mind, I'm going down the checklist...
MongoDB - Check (running after executing mongod.exe).
Node - Check (server is running after executing grunt).
Express - Check (tied to Node as server).
Angular - ....??
I see that installing MEAN.JS installed several folders for Angular, but I don't think my index.html file is magically "working" for Angular. In fact, to get Angular working, I had to do it the good old fashioned way in my head element:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
So what did MEAN.JS actually do here? And how should I be integrating Angular if not this way? I'd appreciate any help here on this.
Thanks!
Angular best practices is to load scripts not in the HEAD, but in the end of documenet before the tag. Scroll to the end of your html file, maybe it's here.
!-- Application JavaScript Files -->
<script src="lib/angular/angular.js" type="text/javascript"></script>
<script src="lib/angular-resource/angular-resource.js" type="text/javascript"></script>
<script src="lib/angular-animate/angular-animate.js" type="text/javascript"></script>
<script src="lib/angular-ui-router/release/angular-ui-router.js" type="text/javascript"></script>
<script src="lib/angular-ui-utils/ui-utils.js" type="text/javascript"></script>
<script src="lib/angular-bootstrap/ui-bootstrap-tpls.js" type="text/javascript"></script>
<script src="config.js" type="text/javascript"></script>
<script src="application.js" type="text/javascript"></script>
.................//..............................
<script src="modules/users/controllers/settings.client.controller.js" type="text/javascript"></script>
<script src="modules/users/services/authentication.client.service.js" type="text/javascript"></script>
<script src="modules/users/services/users.client.service.js" type="text/javascript"></script>
<!-- Livereload script rendered -->
<script src="http://localhost:35729/livereload.js" type="text/javascript"></script>
</body>
If <script src="lib/angular/angular.js"... is not here check meanJsFolder/public/lib for the presence of these libraries
\angular
\angular-animate
\angular-bootstrap
.......
\bootstrap
\jquery
If lib folder is empty - something happens with Bower - package manager for frontend. It installs all angular libraries.
It turns out my question was answered here:
Uncaught ReferenceError: angular is not defined - Mean.IO
In short, I opened /public/lib/bootstrap/ and found my bower.json file. I added in the lines, noted in the above link, i.e.:
{
"name": "mean",
"version": "0.3.0",
"dependencies": {
"angular": "latest",
"angular-resource": "latest",
"angular-cookies": "latest",
"angular-mocks": "latest",
"angular-route": "latest",
"bootstrap": "latest",
"angular-bootstrap": "0.10.0",
"angular-ui-router": "#master"
}
Then ran bower update and my page loaded.
Enter "bower install" in the CLI. That will install the angular library and place it in its designated directory.
Related
Few days ago i decide to implement vue.js in a simple html5, css3 and javascript web. But now i can't import my libraries like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LiloTechnology</title>
<link href="/css/bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="../assets/js/jquery.1.8.3.min.js"></script>
<script type="text/javascript" src="../assets/js/bootstrap.js"></script>
<script type="text/javascript" src="../assets/js/jquery-scrolltofixed.js"></script>
<script type="text/javascript" src="../assets/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../assets/js/jquery.isotope.js"></script>
<script type="text/javascript" src="../assets/js/wow.js"></script>
<script type="text/javascript" src="../assets/js/classie.js"></script>
</body>
</html>
Can you please tell me how to import external .js files?
Thank you.
You can just add external (from the outside) resources like so:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
and so on... CSS works the same way in link rel="externalUrlTo.css"
For a production ready app; maybe consider using a module bundler like Webpack and npm to install dependencies. Therefore you don't have to rely on a external services being up or down and have tighter control over bundling.
If you are in a ES6 or ES5-style CommonJS environment and using Webpack, you should consider installing your dependencies with npm
npm install module --save
and afterwards importing them in your JS code using var module = require('module') or in ES6 import module from 'module'
For instance for jQuery it would be npm install jquery --save (--save by the way stores it to your package.json to be able to restore your dependencies easily using npm install) and import it using var $ = require('jquery') (again ES6: import {$, jQuery} from 'jquery').
For jQuery in particular take into account, that some libraries rely on it being globally available. So make sure to import it first and assign it to window (or global) as seen in How to import jquery using ES6 syntax?)
If you require a specific version you might also want to add it to your package.json or install it directly using npm install module#version. Hope that helps a bit!
I am trying to follow the angular 2 setup guide and am having issues. I am using browsersync and I cannot seem to figure out how to get this code to work.
<script>
.......
System.import('./app/boot')
.then(null, console.error.bind(console));
</script>
The application cannot find /app/boot.js because I am serving up the application using a gulp build process. I cannot access any directories with my "gulp serve" build process, and browser sync is being used. How can I go about using SystemJS in combination with browser sync so that it can find my boot.js file?
Sorry if this is a easy question. I am new to this kind of build process and normally it would be straightforward to just include the file. Thanks.
Well you are not posting you code from where we detect the whats error is in your code. but yes gulp with browsersync is a very good combination to make our project run smoothly. i think you are not importing your bootstrap file properly that's may be the error.
still me to used same project setup for my project. i used gulp task with the browsersync in the angular2 you can refer to my repository for the help. this repo may help you to figure out whats the error
https://github.com/MrPardeep/Angular2-DatePicker
I had similar issues after changing my build process to compile everything into a dist folder instead of root. I tried adjusting baseUrl in System.config, adding maps, paths, manually adding the .js extension to imports etc.
Lessons I learned:
The sequence of loading scripts and configuring libraries is crucial.
System.config needs to be set before including Rx & angular libraries.
Then you can import and bootstrap app.
Following #pardeep-jain advice to look at his datepicker repo this worked for me.
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="js/libs/es6-shim.min.js"></script>
<script src="js/libs/system-polyfills.js"></script>
<script src="js/libs/angular2-polyfills.js"></script>
<script src="js/libs/system.src.js"></script>
<script>
System.config({
defaultJSExtensions: true,
map: {
rxjs: '/node_modules/rxjs'
},
packages: {
rxjs: {
defaultExtension: 'js'
}
}
});
</script>
<script src="js/libs/Rx.js"></script>
<script src="js/libs/angular2.dev.js"></script>
<script src="js/libs/router.dev.js"></script>
<script src="js/libs/http.dev.js"></script>
<script>
System.import('js/boot');
</script>
<link rel="stylesheet" href="css/app.css">
</head>
<base href="/">
<!-- 3. Display the application -->
<body>
<app>Loading...</app>
I created new project and selected "Angular JS" as project type in webstorm.
Now webstorm has created a project for me like this:
I have added angular.js as a dependent javascript library.
When I open the index.html file, it has below code:
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
The code is referring to angular js files which are present in folder called as bower_components, but the webstorm has not created any such folder automatically. Due to this when I created a file called app1.js and trying to write some angular js code the auto-completion is not working at all.
What is the correct way of creating the projects in webstorm for Angular JS?
Earlier I tried with creating a simple project rather than Angular Js project but still had issue with auto-completion. The details are given in this post : How to create a simple angular js project in webstorm
Update:
Thanks to Daniel, now the issue of bower components is solved. But still the auto-completion is not working when I try to do for code webstorm.controller, please see below screenshot, how can I fix this issue?
Standard Angular methods completion doesn't currently work, please follow WEB-14134 for updates
I'm making Angular2 app, and the main HTML is this one:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>App</title>
<script src="./lib/traceur-runtime.js"></script>
<script src="./lib/system.js"></script>
<script src="./lib/angular2.dev.js"></script>
</head>
<body>
<app></app>
<script src="./js/bootstrap.js"></script>
</body>
</html>
My goal is to make all files load locally. So - when I put those three files in the lib folder - I saw in the network inspector that it can't load "es6-modules-loader#0.16.6.js" from there, so I downloaded that file from Internet and put it in the "lib" folder. Then all worked fine :)
BUT:
Today the network connections stopped for a while, and I couldn't run the project, cause it actually loaded two more files from the net:
https://github.jspm.io/jmcriffey/bower-traceur#0.0.87.js
https://github.jspm.io/jmcriffey/bower-traceur#0.0.87/traceur.js
I see them defined at the end of system.js.
So my question is: How can I make everything loads from the local filesystem?
This is my set up, I hope it works for you
I installed all this packages through npm.
<script src="node_modules/traceur/bin/traceur-runtime.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<!-- alpha35 -->
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
With simply this, systemjs will not be able to find any of the angular2 files, so you have to add paths in System.config to tell to systemjs where angular2's files are.
System.config({
traceurOptions: {
annotations: true,
types: true,
memberVariables: true
},
paths: {
'angular2/*' : 'node_modules/angular2/*'
},
defaultJSExtensions: true // or you specify the .js
});
This is my set up, not necessarily the best one, but it works for me.
I hope it helps you.
I have problems understanding the usemin(Prepare), described in here: usemin
What I understand is, that with the usemin, you can combine many files as only one file, which would be a good idea when building your JS application. I also understand the flow how you should use it, for example:
// simple build task
grunt.registerTask('build', [
'useminPrepare',
'concat:generated',
'cssmin:generated',
'uglify:generated',
'filerev',
'usemin'
]);
Then if you have this code:
<!-- build:js js/app.js -->
<script src="js/app.js"></script>
<script src="js/controllers/thing-controller.js"></script>
<script src="js/models/thing-model.js"></script>
<script src="js/views/thing-view.js"></script>
<!-- endbuild -->
The concat task would combine all those files into a one file, called app.js, and put it in a .tmp folder. Then the uglify task would take the file app.js from the .tmp folder, uglify all js in it, and put it to dist-folder.
Let's say that before useminPrepare, I have had another task, which translates the original html (index.html) also to dist folder. Now when the usemin task starts, I have set it to use the dist folder, and it should replace the old blocks with a reference to the generated app.js. So now, in the html inside the dist folder, the same part should look something like this:
<script src="js/app.js"></script>
Is this correct? So now there shouldn't be any comment tags left? Now I have a problem related to the usemin. The situation is this: In the beginning html, I have comment tags for bower_components (bower-install) inside usemin tags like this:
<!-- build:js js/app.js -->
<script src="js/app.js"></script>
<script src="js/controllers/thing-controller.js"></script>
<!-- bower:js -->
<script src="bower_components/something/some_bower_component.js"></script>
<script src="bower_components/something/some_bower_component.js"></script>
<script src="bower_components/something/some_bower_component.js"></script>
<!-- endbower -->
<script src="js/models/thing-model.js"></script>
<script src="js/views/thing-view.js"></script>
<!-- endbuild -->
With this setting, everything seems to work good until the usemin task in the end. The usemin task is now unable to replace the code blocks. I have identified the reason why it can't. It is because I have those bower comment blocks there. So if I separately make the first tasks, then transfer the code to dist, then remove those bower comment tags, and make the rest of the tags in the build, then everything works fine. I want to solve this so that I can run all the tasks straight through. How could I solve this? Why does usemin fail if it sees comment blocks? Could I change usemin options to ignore comment blocks? Or should I write a grunt task, that will remove those particular comment blocks after bower components are injected and the html has been transfered to dist? The versions I have are:
"grunt-bower-install": "~0.7.0",
"grunt-concurrent": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-coffee": "~0.7.0",
"grunt-contrib-compass": "~0.6.0",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-connect": "~0.5.0",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-cssmin": "~0.7.0",
"grunt-contrib-htmlmin": "~0.1.3",
"grunt-contrib-uglify": "~0.2.0",
"grunt-usemin": "~2.0.0",
See this answer: grunt usemin doesnt affect the html file(index.html)
Just had this problem by myself and my solvation was to convert all line endings into unix style line endings (lf) and avoid windows line endings in any file converted by grunt usemin