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
Related
I'm trying to use VKThread in React. However it doesn't appear
to be available as an npm package. according to the instructions, they say to add <script src="../vkthread/vkthread.min.js" type="text/javascript"></script> to your project. However I don't know how I can do this in a react app.
Any help is appreciated, thanks very much!
You have a "traditional" index.html located in /public. You can add any script such as your <script src="../vkthread/vkthread.min.js" type="text/javascript"></script> in the body there.
I am fairly new to Laravel but I'm getting to grips with it.
At the moment there a partial blade that just includes scripts from the public assets folder, like below.
<script src="{{asset('js/jquery-3.2.1.min.js')}}"></script>
<script src="{{asset('js/bootstrap.js')}}"></script>
<script src="{{asset('js/bootstrap.js')}}"></script>
<script src="{{asset('assets/library/slick/slick.js')}}"></script>
<script src="{{asset('assets/library/slick/slick-init.js')}}"></script>
<script src="{{asset('assets/library/tinymce/jquery.tinymce.min.js')}}"></script>
<script src="{{asset('assets/library/tinymce/tinymce.min.js')}}"></script>
<script src="{{asset('assets/library/tinymce/tinymce-settings.js')}}"></script>
<script src="{{asset('js/isotope-docs.min.js')}}"></script> <!-- JQuery and Bootstrap JS -->
<script src="{{asset('js/app.js')}}"></script>
<script src="{{asset('js/grid.js')}}"></script>
<script src="{{asset('vendor/laravel-filemanager/js/lfm.js')}}"></script>
<script src="{{asset('vendor/laravel-filemanager/js/lfm.js')}}"></script>
I feel like this is a bit messy and far from optimal.
I did some poking around in resources/assets/js and saw that by default Laravel uses bootstrap.js and then grabs this in app.js. Also the items in bootstrap.js seem to be grabbed directly from the node_modules folder.
Is it better practice to instead include all the JavaScript libraries in bootstrap.js?
If so, could I install all these libraries via NPM and somehow include them in the bootstrap.js file? At least the ones that are available via npm.
Then in my footer I could just include app.js instead of my individual scripts.
You can use Laravel mix to concatenate, minify/uglify your JS, style assets.
Laravel mix documentation
After building a project with Angular CLI, I keep getting 404:Cannot GET with my inline, styles bundle.js, and main bundle.js.
At the bottom of my index.html:
<script type="text/javascript" src="inline.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
The files are in the same folder as index.html, with all of the angular 2 goodies. When I copy the text into the corresponding script tags, it works just fine.
Thanks #Johan Blomgren for the answer. Adding this fixed it:
<base href="index.html">
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 want to install the Angular Material library in a project, but I am behind a corporate firewall and even configuring the proxy doesn't work, it seems the proxy blocks certain types of files. Is there a way to install this offline?
FYI this is my BundleConfig
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/font-awesome.min.css",
"~/Scripts/angular-loading/loading-bar.css",
"~/Scripts/nya-bs-select/nya-bs-select.min.css",
"~/Content/angular-ui-switch.css",
"~/Content/site.css"));
bundles.Add(new ScriptBundle("~/bundles/angular")
.Include("~/Scripts/angular.js",
"~/Scripts/angular-route.js",
"~/Scripts/angular-ui/ui-bootstrap-tpls.js",
"~/Scripts/AngularApp/app.js")
.IncludeDirectory("~/app", "*.js", true)
.Include("~/Scripts/smart-table/smart-table.js",
"~/Scripts/angular-loading/loading-bar.js",
"~/Scripts/nya-bs-select/nya-bs-select.min.js",
"~/Scripts/moment.js"));
You can either use the CDN link in your reference, as explained in the docs, or download the source from CDN.
excerpt from the docs:
<head>
<!-- Angular Material CSS using GitCDN to load directly from `bower-material/master` -->
<link rel="stylesheet" href="https://gitcdn.xyz/repo/angular/bower-material/master/angular-material.css">
</head>
<body>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script>
<!-- Angular Material Javascript using GitCDN to load directly from `bower-material/master` -->
<script src="https://gitcdn.xyz/repo/angular/bower-material/master/angular-material.js"></script>
</body>
Or grab the Source
download from here, save of your pc and include in your project ?
It's really confusing; I don't know why they can't put a freakin' Zip archive on GitHub like everyone else that contains all the dependencies. (They include a Zip file, but without the distribution minified files.)
By looking at the source code of the Angular Material site, it seems you can use the following links to get the latest files:
https://material.angularjs.org/latest/angular-material.min.js
https://material.angularjs.org/latest/angular-material.min.css