Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

Archive for Visual Studio

October 1, 2014

Angular Talk at Visual Studio Live! in Washington DC on October 7th, 2014

Filed under: AngularJS,Visual Studio @ 5:25 pm

I am very excited to talk about AngularJS at the upcoming Visual Studio Live! conference in Washington DC!

The session is entitled “Build an Angular and Bootstrap Web Application in Visual Studio from the Ground Up“. It is aimed at intermediate level developers that are new to or just getting started with AngularJS. Because this *is* a Visual Studio conference, the sample application is built using a Visual Studio Web Site for the Angular application and ASP.NET Web API for the back-end Web service. (Though the talk only walks through the Angular code, not the Web API code … we only have 75 minutes!)

If you are looking for the code for this session, you can find it on github here.

If you are not familiar with github, just click the Download ZIP button in the bottom right to download a zip file containing the code.

image

If you are interested in more information about Angular, check out my latest Pluralsight course: “AngularJS Line of Business Applications”. The sample application for the course is built from scratch using WebStorm, but could be created using Visual Studio.

Enjoy!

August 1, 2014

Boldly Code With Us: Preview of Visual Studio Live! Washington, D.C.

Filed under: AngularJS,General,Visual Studio @ 4:09 pm

Earlier this week I presented a preview of my two sessions for the Visual Studio Live! conference coming up in Washington DC on October 6-9, 2014. My two sessions at the conference are:

  • New IDE and Editor Features in Visual Studio 2013
  • Build an Angular and Bootstrap Web Application in Visual Studio from the Ground Up

In the preview, I outlined some of the new IDE and Editor features and then selected one to demonstrate.

I then provided an introduction to AngularJS, specifically what it is and why you may want to use it for development of client-side Web applications.

If you are interested, the recording of this preview presentation is posted here.

Enjoy!

PS circleCheck out my Pluralsight courses!
July 1, 2014

TFS Ate My Homework

Filed under: Visual Studio @ 2:50 pm

Just a really big warning out there so you don’t share the same fate that I did!

I had been checking some of my Pluralsight course source files (code, PowerPoints, recordings, etc) into TFS. I was not checking in *all* of the files because some of them were quite large and it was taking 15-20 minutes to check in those files.

When working on code, it was difficult to see added files because under “Excluded Changes” I had “Detected: 782 add(s)”. With so many detected files, I often did not notice that my newest code files were excluded. The problem was that TFS was finding not only my project files but ALL of the Pluralsight course files (including the huge .wmv recordings) that were never checked in.

Now that I am starting my next course, I wanted to ensure that I could easily see what files should be checked in and which should not. So I looked up how to disconnect the older projects from a path so TFS would not longer report all of these additional adds.

It’s easy. Just right-click on the directory in Source Control Explorer and select Advanced | Remove Mapping. No warning message. Seemed easy enough until I looked at the output window:

Deleting C:\Users\Deb\Speaking\PluralSight\Defensive Coding in C#\DefensiveCodingAbstract.docx
Deleting C:\Users\Deb\Speaking\PluralSight\Defensive Coding in C#\DefensiveCodingNotes.docx
Deleting C:\Users\Deb\Speaking\PluralSight\Defensive Coding in C#\AcmeCustomerManagement\AcmeCustomerManagement.sln

<Continuing on for several pages>

Deleting C:\Users\Deb\Speaking\PluralSight\Defensive Coding in C#\module7-exceptions\module7-clip1.camproj
Deleting C:\Users\Deb\Speaking\PluralSight\Defensive Coding in C#\module7-exceptions\module7-clip2.camproj
Deleting C:\Users\Deb\Speaking\PluralSight\Defensive Coding in C#\module7-exceptions\module7-clip3.camproj

Yep. It deleted ALL of my files, including those I had never checked in. GONE!

BUMMER!

Hope I never have to update any of my past courses because all of the source files (recordings, etc) are just gone.

Thought I would share this experience with the hope that you won’t share the same fate.

P.S. Now for the rest of the story…

My friend Klaus came by the office today and told me about shadow copy.  Something I must have enabled early on because he found a copy of all of my files from Friday (before they were deleted by TFS on Monday). Hope to have all of the files back in place by the end of day. THANKS KLAUS!!

May 9, 2014

Defensive Coding in C# Course Went Live Today!

Filed under: C#,Visual Studio @ 11:45 am

How do you write great, maintainable code when faced with constantly changing requirements, legacy issues, intensive time pressures and a rapidly evolving environment? And how do you keep that code great after maintenance activities, multiple developers, and the ravages of time?

My new Pluralsight course: Defensive Coding in C# shows you how to write great, maintainable code and keep that code great using defensive coding techniques.

image

Enjoy!

PS-circle22

 

Check out my Pluralsight courses!

May 7, 2014

Does Your Code Feel Like a Ball and Chain?

Filed under: C#,VB.NET,Visual Studio @ 11:06 am

Do you ever work on code that is disorganized; that was too often written the “quick” way instead of the “right” way? You try to make one little change or addition and the existing code makes everything difficult. The code feels like a ball and chain, dragging you down and slowing your progress.

image

If you have experienced this phenomenon, you have seen the results of technical debt.

Pluralsight just released a new course from Mark Heath entitled “Understanding and Eliminating Technical Debt“. It explores what technical debt is, the problems it causes, and how you can identify and quantify it. Then, the important bit, it shows you how to create an action plan to address the technical debt and provides some practical techniques for repaying it.

image

I’ve just watched this course and HIGHLY recommend it for any developer.

Enjoy!

PS-circle2

 

Check out my Pluralsight courses!

April 17, 2014

SSDT Data Editor Now Has Sorting and Filtering!

The SQL Server Data Tools (SSDT) provide access to many SQL Server features from within Visual Studio. One of those features, available from the SQL Server Object Explorer, is the visual Data Editor.

While the Data Editor has always been great for inserting, updating, and viewing data, it did not support any sorting or filtering … until now!

image

NOTE:

  • For an introduction to SSDT and the SQL Server Object Explorer, see this post.
  • For an introduction to the SSDT Data Editor, see this post.

The March 2014 release of SSDT added support for SQL Server 2014 databases. But it ALSO provided new features in VS 2012 and VS 2013 for sorting and filtering the data in the Data Editor!

If you are using VS 2012, you can use the update option to get this update (SQL | Check for Updates).

If you are using VS 2013, the update should appear in the Notification window when you click the notification flag:

image

If not, you can look for it under Tools | Extensions and Updates.

Once you have it installed, your Data Editor will have two additional buttons:

image

The first button disables sorting and filtering.

The second button displays a dialog for entry of the sorting and filtering criteria.

image

In this example, I set a sort on the FirstName column. Any number of sorts can be added, either ascending or descending. I also added a filter on the LastName so only customers with a last name that begins with B will be listed.

This dialog also allows you to uncheck columns to remove them from the Data Editor display. This helps you focus on only the columns you need to see.

Notice at the bottom of the dialog is the SQL expression SSDT will use to query the table. This expression changes as you modify the columns, sorting, sort order, or filter.

Clicking Apply immediately executes the query and re-populates the data in the Data Editor. This allows you to view the results without closing the Filter and Sort dialog.

image

When you have the results you need, click OK to close the dialog.

NOTE: When I attempted to edit the sorted and filtered data, I received an error message:

image

HOWEVER, the edits were actually made to the data.

Try out these new features any time you want more control over the data displayed in the Data Editor.

Enjoy!

March 7, 2014

VSLive! Visual Studio 2013 New IDE Features Part I and II

Filed under: Visual Studio @ 4:00 pm

If you are going to Visual Studio Live! in Las Vegas next week (March 10-14), I hope I will see you at my Visual Studio sessions.

vslive_lasvegas_2014

I am covering both the new Integrated Development Environment (IDE) and the many very cool new code editor features.

If you want a sneak peak at the code … you can find it here.

Enjoy!

PS-circle
Check out my Pluralsight courses!

AngularJS in Visual Studio: Data Binding

Filed under: AngularJS,Data Binding,Visual Studio @ 12:15 pm
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http':’https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, ‘script’, ‘twitter-wjs’);

This is a continuation of the World’s Simplest AngularJS Example in Visual Studio post. This post adds simple data binding to the example.

Most .NET developers understand data binding from Windows Forms, Web Forms, or XAML.

For example, in Windows Forms you can bind a LastNameTextbox control’s Text property to a LastName property of a Customer class (or LastName field in a data source). When the form displays, the Textbox is automatically populated. If the user changes the contents of the Textbox, the property (or field) is automatically updated.

image

Angular provides this same type of two-way data binding. It automatically synchronizes HTML elements with data properties.

The key to data binding with Angular is the ng-Model directive. The ng-Model directive binds HTML elements to a property. If no property exists, the property will be created implicitly. We’ll use that default functionality to perform data binding without any real properties for this simple example.

Let’s try some very simple data binding:

<!DOCTYPE html>
<html xmlns=”
http://www.w3.org/1999/xhtml”>
<head>
    <title>Acme Customer Management</title>
</head>
<body ng-app>
    <p>Customer Name: <input type=”text” 
                             ng-model=”customerName” /></p>
    <div>{{customerName}} Orders as of {{ “2014-01-31″}} </div>

    <script src=”Scripts/angular.js”></script>
</body>
</html>

  • The above code sets the ng-model directive as an attribute on the input tag.
  • The value of the ng-model directive is the name of the property to which this input tag is bound. In this case, the property is named “customerName”.
    • This binds the input tag to the defined property.
    • As the user types into the input box, the customerName property is automatically updated.
    • This property is not defined anywhere, so Angular creates it implicitly.
  • The div tag displays the value of the property by including it in double curly braces.
    • Double-curly braces define a “binding” and can contain any Angular expression.
    • In this case, the expression is just the property name.
    • So the value of the property will appear where the binding is defined.
  • As the user enters text into the input box, that text is immediately displayed in the div tag.

Run it, and you get:

image

Enter some text, and it appears as follows:

image

We’ll see lots more about binding once we connect to some data.

Enjoy!

PS circle


Check out my Pluralsight courses!

February 25, 2014

AngularJS in Visual Studio: Filters

Filed under: AngularJS,Visual Studio @ 7:04 pm

This is a continuation of the World’s Simplest AngularJS Example in Visual Studio post. This post adds simple filters to the example.

AngularJS has specialized filter components for:

  • Filtering an array by specific criteria (filter)
  • Limiting an array to a specific number of items (limitTo)
  • Ordering an array by an expression predicate (orderBy)
  • Formatting currency (currency)
  • Formatting numbers (number)
  • Formatting dates (date)
  • Converting an object to JSON (json)
  • Converting to lower case (lowercase)
  • Converting to upper case (uppercase)

Filter components are placed within the double curly braces after the value they are filtering. They are denoted with a pipe character (|) followed by the filter type and then any arguments.

Let’s try out the formatting filters.

<!DOCTYPE html>
<html xmlns=”
http://www.w3.org/1999/xhtml”>
<head>
    <title>Acme Customer Management</title>
</head>
<body ng-app>
    <h1>{{10/3| number:2}} Orders as of {{ “2014-01-31″ | date:’MMM-dd-yyyy’}} </h1>
    <script src=”Scripts/angular.js”></script>
</body>
</html>

Run it, and you get:

image

This, of course, makes no sense. You can’t have 3.33 orders. But it does demonstrate how the numeric filter feature rounds numbers. Specifying a number value of 2 rounds to 2 decimal places.

The date has now been reformatted to the desired MMM-dd-yyyy format.

You can add multiple filters for one value. For example, this code formats the date and then displays it in upper case.

<h1>{{10/3| number:2}} Orders as of {{ “2014-01-31″ | date:’MMM-dd-yyyy’ | uppercase}} </h1>

This results in:

image

We’ll look at more filters once we connect to some data.

Enjoy!

Check out my Pluralsight courses!

February 18, 2014

The World’s Simplest AngularJS Example in Visual Studio

Filed under: AngularJS,Visual Studio @ 7:11 pm

AngularJS is a new client-side framework for building rich Web applications using HTML and JavaScript.

Instead of starting with "this is everything it does", I thought I would start with a simple step-by-step example. This example is the world’s simplest Angular application. By starting simple, we can build on the concepts one by one.

1) Start with a Web project.

I started with an empty Web project to minimize the extra "stuff" generated when selecting any of the other templates:

  • Select Add | New Project to add a project to an existing solution. OR Select File | New Project to create a new solution and new project.
  • Select your desired language from the Add New Project dialog (Visual Basic or Visual C#).
  • Select the ASP.NET Web Application template. There is now only one project template defined in the Add Project dialog … all of ASP is now under the umbrella of "One ASP".
  • Then selected the desired template from the second dialog. I selected the Empty template.

2) Download AngularJS.

A NuGet package is the easiest way to get AngularJS if you are using Visual Studio:

  • In Visual Studio, select the new Web project in Solution Explorer.
  • Then select Project | Manage NuGet Packages… from the Visual Studio menu.
  • Search for AngularJS.
  • Click Install.
  • When it is finished installing, click Close.

image

The installation process adds a Scripts folder with many "angular-" scripts in it.

3) Build your first HTML page using Angular.

By convention, the main file of an application is Index.html:

  • Right-click on the Web project and select Add | HTML Page.
  • Name the item Index. This adds an Index.html file to your project and opens it.

Visual Studio adds the basic HTML tags for you. So when you first view the contents of the file, it will look like this:

<!DOCTYPE html>
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

</body>
</html>

  • Optionally, give the page a title.
  • In the body of the page, add a script tag to include the angular.js or angular.min.js script file.
    Note that it is often easier to debug using the angular.js file. Replace it with the angular.min.js file before deploying.
  • In any tag that encloses all Angular code, specify an ng-app directive. In this case, I put it in the body tag. Be sure to remove any attributes for this directive that Visual Studio may attempt to add for you.
  • Add any desired code.
  • Use double curly braces to define a placeholder, called a "binding", for any Angular expression.

The resulting code could look something like this:

<!DOCTYPE html>
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
    <title>Acme Customer Management</title>
</head>
<body ng-app>
    <h1>{{4*2}} Orders as of {{ "2014-01-31" }} </h1>
    <script src="Scripts/angular.min.js"></script>
</body>
</html>

Run. The result of the world’s simplest Angular application is:

image

When Angular processes the page, it evaluates the expressions. so 4*2 = 8 and it displays "8 orders". The date is simply a string literal, which is just displayed as is.

There, we did it! The world’s simplest Angular application!

To summarize:

1) Download the AngularJS JavaScript files (which we did using NuGet).

2) Include a script tag for the angular.js file.

3) Add an ng-app directive in a tag above any usage of Angular (we added it to the body tag).

4) Enclose any Angular expressions in placeholders (called bindings) defined with double curly braces.

Enjoy!

Check out my Pluralsight courses!

Next Page »

© 2014 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs